Создание таблицы с закругленными углами 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 of border-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 может повлиять на адаптивные качества таблицы, поэтому верстку следует проверять на различных устройствах после внедрения новых стилей.

Полезные материалы

1. border-radius – CSS | MDN — Описание свойства border-radius.
2. border-collapse – CSS | MDN — Детали работы свойства border-collapse.
3. Circle drawing with SVG's arc path – Stack Overflow — Обсуждение проблем совместимости между border-collapse и border-radius.
4. The Z-Index CSS Property: A Comprehensive Look — Smashing Magazine — Статья углубляет понимание управления слоями CSS и границами, несмотря на акцент на z-index.
5. clip-path | Codrops — Урок по работе с атрибутом отсечения и маскировки как креативной альтернативой для закругления границ.