Создание таблицы с закругленными углами CSS без JavaScript
Быстрый ответ
Чтобы добиться закруглённых углов для таблицы со слитыми границами, придётся отказаться от свойства border-collapse: collapse
. Вместо этого рекомендуем использовать для этого контейнер div
с overflow: hidden
, который будет скрывать все элементы, выходящие за границы блока, и применять border-radius
как к самому блоку, так и к границам угловых ячеек таблицы. Вот ниже соответствующий пример кода:
<div style="overflow: hidden; border-radius: 8px;">
<table>
<tr>
<td style="border-top-left-radius: 8px;">...</td>
<td>...</td>
<td style="border-top-right-radius: 8px;">...</td>
</tr>
<!-- ... промежуточные строки ... -->
<tr>
<td style="border-bottom-left-radius: 8px;">...</td>
<td>...</td>
<td style="border-bottom-right-radius: 8px;">...</td>
</tr>
</table>
</div>
Обход border-collapse: collapse
Чтобы обойти проблему с border-collapse: collapse
, следует использовать несколько приёмов CSS:
- Контейнер div: Разместите таблицу в
div
сoverflow: hidden
, который обрежет часть таблицы за пределами границ блока, создав illusion ofborder-radius
. - Индивидуальное применение
border-radius
: Присваивайтеborder-radius
только для угловых ячеек. - Промежуток между ячейками: Установите
border-spacing: 0
иborder-collapse: separate
, чтобы границы ячеек касались друг друга, но при этом были независимыми. - Невидимые границы: Используйте свойство
border-style: hidden
для создания иллюзии непрерывной границы.
Дополнительные возможности CSS
Варианты дополнительной настройки закруглённых границ включают в себя:
- Тень вместо границ: Примените
box-shadow
вместо стандартных границ, чтобы создать эффект закругления. - Только верхние и боковые границы: Применените
border-top
для ячеек верхнего ряда иborder-left
— для ячеек первого столбца. - CSS-классы: Создайте отдельные классы для каждой из наружных ячеек для более точного контроля стилей.
Продвинутые приемы CSS
Есть и более сложные приёмы CSS:
- Псевдоэлементы: Используйте
::before
и::after
для создания впечатления слитых границ с закруглёнными углами. - SVG-графика: Добавьте SVG с закруглёнными углами в углы таблицы, чтобы усилить визуальный эффект.
- Обрезка по форме: Используйте
clip-path
на контейнереdiv
, чтобы обрезать острые углы таблицы, не затрагивая границы.
Визуализация
Представим, что ячейки таблицы — это квадраты, у которых border-radius
настроен, а границы слиты при помощи border-collapse: collapse
:
🟩 🟨 🟩
🟨 🟪 🟨
🟩 🟨 🟩
# С border-collapse: collapse
В связи со слиянием границ углы не могут быть закругленными.
🟩 🔄 🟩
🔄 🔄 🔄
🟩 🔄 🟩
С пространством между ячейками, ячейки могут принять закруглённую форму с учётом border-radius
:
🟩 🟪 🟩
🟪 🟪 🟪
🟩 🟪 🟩
# С border-spacing: separate
Применяя border-spacing: 0
и добавляя box-shadow
, можно добиться закруглённости углов и слияния границ:
🟩 🟪 🟩
🟪 🟫 🟪
🟩 🟪 🟩
Использование пространства в ячейках, как в пазле, помогает создать желаемый эффект закруглённых углов без применения border-collapse
.
Секреты стилизации таблиц
Чтобы модифицировать таблицы вопреки традиционным границам HTML-таблиц, нужно понять взаимодействие между border-radius
и border-collapse
.
border-radius
: Создаёт закруглённые углы, предпочтительно приborder-collapse: separate
.border-collapse: collapse
: Хорошо работает для устранения промежутков между ячейками, создавая вид единой непрерывной поверхности.
Трансформация таблиц требует применения различных подходов CSS:
- Вложенные структуры: Размещение таблицы внутри контейнера позволяет контролировать стиль границ на более высоком уровне.
- Поэлементное управление границами: Границы, применяемые только к определенным ячейкам, помогают создать нужную форму.
- Теневые эффекты: Использование
box-shadow
создаёт впечатление непрерывных границ при сохранении закруглённости углов.
Учёт возможных проблем
При внедрении решений на CSS следует учитывать следующие аспекты:
- Особенности рендеринга в браузерах: Будьте готовы к вариациям отображения в различных браузерах и проверяйте решение в каждом из них.
- Интерактивные эффекты: Подумайте заранее о том, как взаимодействие пользователей с границами может изменить их вид.
- Адаптивный дизайн: Внимание к деталям CSS может повлиять на адаптивные качества таблицы, поэтому верстку следует проверять на различных устройствах после внедрения новых стилей.
Полезные материалы
- border-radius – CSS | MDN — Описание свойства
border-radius
. - border-collapse – CSS | MDN — Детали работы свойства
border-collapse
. - Circle drawing with SVG's arc path – Stack Overflow — Обсуждение проблем совместимости между
border-collapse
иborder-radius
. - The Z-Index CSS Property: A Comprehensive Look — Smashing Magazine — Статья углубляет понимание управления слоями CSS и границами, несмотря на акцент на
z-index
. - clip-path | Codrops — Урок по работе с атрибутом отсечения и маскировки как креативной альтернативой для закругления границ.