Устранение нежелательных границ ячеек таблицы в CSS

Быстрый ответ

Для создания таблицы без границ примените к элементам <td> и <th> стиль border: 0;, а к <table> — border-collapse: collapse;:

table {
  border-collapse: collapse;
}

td, th {
  border: 0; // И границы исчезают!
}

Если вы хотите сохранить некоторые границы, настройте их отдельно. Например, с помощью border-bottom: 1px solid black; можно создать тонкие границы для подчёркивания.

CSS – методы для удаления границ таблиц

Стилизация таблиц без границ — распространённая задача, которую можно сверить с помощью нескольких основных CSS-правил:

Использование свойства border-collapse

Свойство border-collapse: collapse; устраняет нежелательные границы и стандартные интервалы между ячейками.

table {
  border-collapse: collapse; // Объединяет границы, позволяет вам контролировать их
}

Подробнее об этом расскажет наш спикер на видео

Очистка границ с приоритетом с помощью ‘!important’

С помощью border-style: hidden!important вы зададите высокий приоритет скрытию границ, сравнимый с эффектом туза в рукаве.

td, th {
  border-style: hidden!important; // Скрывает границы как волшебным пасом
}

Устранение внутренних отступов и полей

Чтобы внутренние поля не создавали иллюзию границ, присвойте элементу <table> атрибуты border="0" cellpadding="0" cellspacing="0". Это полностью уберёт предустановленные рамки и отступы.

<table border="0" cellpadding="0" cellspacing="0">
  <!-- ваш контент -->
</table>

Отдельное форматирование для thead и tbody

Разделите <thead> и <tbody>, чтобы получить возможность менять стили заголовков и содержимого таблицы без использования границ.

<table>
  <thead>
    <!-- заголовки -->
  </thead>
  <tbody>
    <!-- данные -->
  </tbody>
</table>

Визуализация

Проведём аналогию каждой ячейки с участком на карте города:

Город:      Дорога = Граница
🌆1️⃣🛣️||🛣️2️⃣🌇
🏞️3️⃣🛣️||🛣️4️⃣🏞️
== нежелательные участки == 🚫

Применим CSS для удаления границ:

td {
  border: none; /* До свидания, нежелательные границы! */
}

И вот, у нас город без границ:

Город:
🌆1️⃣   2️⃣🌇
🏞️3️⃣   4️⃣🏞️
== порядок и гармония на земельных участках ==

Решение проблем с границами в различных браузерах

При стилизации таблиц без границ иногда выявляются особенности работы разных браузеров. Вот несколько полезных советов:

Проблема с border-spacing

Свойство border-spacing: 0; помогает бороться с пространством между ячейками, однако при работе со старыми версиями Internet Explorer результат может быть непредсказуемым.

table {
  border-spacing: 0; // Объединяет ячейки, как объятия
}

Фоновые цвета для структурирования таблицы

Разделение секций таблицы фоновыми цветами может компенсировать отсутствие границ.

thead tr, tbody tr:nth-child(odd) {
  background-color: #f2f2f2; // Создаёт аккуратный вид
}

Тактика использования ‘cellpadding’

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

<table cellpadding="0">
  <!-- ваш элементный контент -->
</table>

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

1. CSS Styling Tables — Подробное руководство от W3Schools по оформлению таблиц с помощью CSS.
2. A Complete Guide to the Table Element | CSS-Tricks — Комплексное руководство CSS-Tricks по работе с таблицами.
3. border-collapse – CSS: Cascading Style Sheets | MDN — MDN Web Docs объясняет использование border-collapse для корректного отображения таблиц.
4. css – Word-wrap in an HTML table – Stack Overflow — На Stack Overflow обсуждается вопрос об переносе текста в таблицах.
5. Top 10 CSS Table Designs — Smashing Magazine — Smashing Magazine представляет десятку лучших дизайнов таблиц.
6. css – Should I use border: none or border: 0? – Stack Overflow — Пользователи Stack Overflow обмениваются советами по удалению границ.