Как сделать скруглённую рамку таблицы?

0 2

Из-за большого многообразия вариантов оформления таблиц не существует какого-то одного решения, как у таблицы скруглить рамку. Поэтому рассмотрим несколько типовых таблиц.

Рамка вокруг таблицы

Само скругление уголков рамки делается через свойство border-radius, его значением выступает радиус уголка. Добавляя его вместе со свойством border получим рамку вокруг таблицы и без линий внутри ячеек (пример 1).

Пример 1. Использование border-radius

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Таблица</title> <style> table { width: 80%; /* Ширина таблицы */ margin: auto; /* Выравниваем таблицу по центру */ border: 1px solid #4C594F; /* Параметры рамки */ border-radius: 10px; /* Радиус скругления */ border-spacing: 0; /* Расстояние между ячейками */ } th, td { padding: 5px; /* Расстояние от текста до края ячейки */ } thead th { border-bottom: 1px solid #4C594F; /* Линия снизу */ text-align: left; /* Выравнивание по левому краю */ } </style> </head> <body> <table> <thead> <tr><th>Имя</th><th>Оружие</th></tr> </thead> <tbody> <tr><td>Леонардо</td><td>Катаны</td></tr> <tr><td>Рафаэль</td><td>Кинжалы-сай</td></tr> <tr><td>Донателло</td><td>Шест-бо</td></tr> <tr><td>Микеланджело</td><td>Нунчаки</td></tr> </tbody> </table> </body> </html> Таблица с цветным фоном

Схожим образом делается таблица, залитая однотонным цветом или с фоновым изображением, вроде градиента. Для этого мы используем свойство background совместно с функцией linear-gradient(), как показано в примере 2.

Пример 2. Использование background

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Таблица</title> <style> table { width: 80%; /* Ширина таблицы */ margin: auto; /* Выравниваем таблицу по центру */ background: linear-gradient(to bottom, #90C057, #017138); /* Градиент */ color: #fff; /* Цвет текста */ border-radius: 10px; /* Радиус скругления */ border-spacing: 0; /* Расстояние между ячейками */ } th, td { padding: 5px; /* Расстояние от текста до края ячейки */ } thead th { border-bottom: 1px solid #fff; /* Линия снизу */ text-align: left; /* Выравнивание по левому краю */ } </style> </head> <body> <table> <thead> <tr><th>Имя</th><th>Оружие</th></tr> </thead> <tbody> <tr><td>Леонардо</td><td>Катаны</td></tr> <tr><td>Рафаэль</td><td>Кинжалы-сай</td></tr> <tr><td>Донателло</td><td>Шест-бо</td></tr> <tr><td>Микеланджело</td><td>Нунчаки</td></tr> </tbody> </table> </body> </html> Рамка вокруг ячеек

Если требуется сделать рамку вокруг каждой ячейки, тогда свойство border пишется для селекторов th и td, перечисляя их через запятую.

th, td {   border: 1px solid #333; /* Цвет фона ячеек */ }

Радиус скругления придётся указывать для каждой из четырёх угловых ячеек индивидуально. Сперва нам понадобятся псевдоклассы :first-child и :last-child.

  • tr:first-child — первая строка таблицы;
  • tr:last-child — последняя строка таблицы;
  • td:first-child — первая ячейка в строке таблицы;
  • tr:last-child — последняя ячейка в строке таблицы.

Комбинируя между собой разные селекторы определяем стиль конкретных ячеек.

  • tr:first-child td:first-child — первая ячейка первой строки (левая верхняя);
  • tr:first-child td:last-child — последняя ячейка первой строки (правая верхняя);
  • tr:last-child td:first-child — первая ячейка последней строки (левая нижняя);
  • tr:last-child td:last-child — последняя ячейка последней строки (правая нижняя).

Для ячеек заголовка вместо td подставляем th — th:first-child и th:last-child.

Свойство border-radius достаточно универсально, оно может устанавливать радиус скругления со всех сторон или отдельных уголков.

  • border-radius: 10px 0 0 0 — левый верхний уголок;
  • border-radius: 0 10px 0 0 — правый верхний уголок;
  • border-radius: 0 0 10px 0 — правый нижний уголок;
  • border-radius: 0 0 0 10px — левый нижний уголок.

Вместо border-radius допустимо использовать специальные свойства, определяющие радиус скругления конкретного уголка.

  • border-top-left-radius — левый верхний уголок;
  • border-top-right-radius — правый верхний уголок;
  • border-bottom-left-radius — левый нижний уголок;
  • border-bottom-right-radius — правый нижний уголок.

В примере 3 показан результат использования этих свойств в сочетании с комбинацией селекторов.

Пример 3. Ячейки с рамкой

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Таблица</title> <style> table { width: 80%; /* Ширина таблицы */ margin: auto; /* Выравниваем таблицу по центру */ –r: 10px; /* Радиус скругления */ border-spacing: 3px; /* Расстояние между ячейками */ } th, td { border: 1px solid #333; /* Параметры рамки */ padding: 5px; /* Расстояние от текста до края ячейки */ } tr:first-child th:first-child { border-top-left-radius: var(–r); /* Левый верхний угол */ } tr:first-child th:last-child { border-top-right-radius: var(–r); /* Правый верхний угол */ } tr:last-child td:first-child { border-bottom-left-radius: var(–r); /* Левый нижний угол */ } tr:last-child td:last-child { border-bottom-right-radius: var(–r); /* Правый нижний угол */ } </style> </head> <body> <table> <thead> <tr><th>Имя</th><th>Оружие</th></tr> </thead> <tbody> <tr><td>Леонардо</td><td>Катаны</td></tr> <tr><td>Рафаэль</td><td>Кинжалы-сай</td></tr> <tr><td>Донателло</td><td>Шест-бо</td></tr> <tr><td>Микеланджело</td><td>Нунчаки</td></tr> </tbody> </table> </body> </html>

Обратите внимание, что между ячейками остаётся небольшой промежуток, величину которого можно регулировать через свойство border-spacing.

Базовая таблица

Если в предыдущем примере установить нулевое значение border-spacing, то часть линий окажутся двойными (рис. 1).

Как сделать скруглённую рамку таблицы?

Рис. 1. Двойные линии между ячейками

Для устранения подобного эффекта предназначено свойство border-collapse со значением collapse. Однако оно не совместимо с border-radius и заодно убирает и скругление уголков (рис. 2).

Как сделать скруглённую рамку таблицы?

Рис. 2. Результат действия border-collapse

Чтобы добиться желаемого оформления таблицы рамку нужно делать не вокруг каждой ячейки, а, к примеру, только сверху и слева.

th, td {   border-top: 1px solid #333; /* Линия сверху */   border-left: 1px solid #333; /* Линия слева */ }

Для самых нижних ячеек и самых правых ячеек придётся добавить дополнительные линии.

/* Ячейки последней строки таблицы */  tr:last-child td {   border-bottom: 1px solid #333; /* Линия снизу */ }  /* Последние ячейки в каждой строке */ th:last-child, td:last-child {   border-right: 1px solid #333; /* Линия справа */ }

Чтобы не повторять несколько раз параметры линии, в примере 4 она вынесена в переменную –b.

Пример 4. Таблица с рамкой

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Таблица</title> <style> table { width: 80%; /* Ширина таблицы */ margin: auto; /* Выравниваем таблицу по центру */ –r: 10px; /* Радиус скругления */ –b: 1px solid #333; /* Параметры линии */ border-spacing: 0; /* Расстояние между ячейками */ } th, td { border-top: var(–b); /* Линия сверху */ border-left: var(–b); /* Линия слева */ padding: 5px; /* Расстояние от текста до края ячейки */ } tr:last-child td { border-bottom: var(–b); /* Линия снизу */ } th:last-child, td:last-child { border-right: var(–b); /* Линия справа */ } tr:first-child th:first-child { border-top-left-radius: var(–r); /* Левый верхний угол */ } tr:first-child th:last-child { border-top-right-radius: var(–r); /* Правый верхний угол */ } tr:last-child td:first-child { border-bottom-left-radius: var(–r); /* Левый нижний угол */ } tr:last-child td:last-child { border-bottom-right-radius: var(–r); /* Правый нижний угол */ } </style> </head> <body> <table> <thead> <tr><th>Имя</th><th>Оружие</th></tr> </thead> <tbody> <tr><td>Леонардо</td><td>Катаны</td></tr> <tr><td>Рафаэль</td><td>Кинжалы-сай</td></tr> <tr><td>Донателло</td><td>Шест-бо</td></tr> <tr><td>Микеланджело</td><td>Нунчаки</td></tr> </tbody> </table> </body> </html>

Автор: Влад Мержевич
Источник: webref.ru

Оставьте ответ

Ваш электронный адрес не будет опубликован.