Как закруглить углы таблицы при помощи CSS

Привет, друзья! В этой статье мы разберемся с вами вопрос, который относится к оформлению таблиц, а именно как при помощи CSS закруглить углы таблицы.

С одной стороны задача простая, но решение все же не самое очевидное, ведь ограничиться обычным border-radius для тега <table> не принесет нужные плоды, особенно если для ячеек таблицы задан фоновый цвет.

Для решения задачи мы воспользуемся псевдоклассами :first-child и :last-child, с их помощью мы обратимся к первой и последней строке <tr> и зададим для первых и последних ячеек <th> и <td> нужный нам радиус скругления.

У меня получился такой код:

/* Первая ячейка в первом ряду*/
table tr:first-child th:first-child, table tr:first-child td:first-child { border-radius: 10px 0 0 0; }
/* Последняя ячейка в первом ряду */
table tr:first-child th:last-child, table tr:first-child td:last-child { border-radius: 0 10px 0 0; }
/* Первая ячейка в последнем ряду */
table tr:last-child th:first-child, table tr:last-child td:first-child { border-radius: 0 0 0 10px; }
/* Последняя ячейка в последнем ряду */
table tr:last-child th:last-child, table tr:last-child td:last-child { border-radius: 0 0 10px 0; }

Если вам помогло это решение, напишите комментарий ниже или поделитесь записью в социальных сетях. А может у вас есть свое решение? Давайте обсудим!

Дмитрий Шкурин
Дмитрий Шкурин
Member since 03.12.2017

Специализируюсь на создании сайтов под управлением Wordpress.

Комментарии

Ваш e-mail не будет опубликован. Обязательные поля помечены *

    Дмитрий Шкурин
    Дмитрий Шкурин

    Специализируюсь на создании сайтов под управлением Wordpress.