Как сделать скруглённую рамку таблицы?
Из-за большого многообразия вариантов оформления таблиц не существует какого-то одного решения, как у таблицы скруглить рамку. Поэтому рассмотрим несколько типовых таблиц.
Рамка вокруг таблицы
Само скругление уголков рамки делается через свойство 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