Добавление нижней границы к строке таблицы HTML с CSS

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

Чтобы придать строкам <td> или <th> бордюр снизу, используйте CSS-свойство border-bottom. Ниже приведён ряд примеров, которые корректно работают во всех современных браузерах:

/* Всегда подчёркиваем содержимое */
tr td, tr th {
  border-bottom: 2px dotted #000; 
}

Оформление лишь последней строки таблицы:

/* Обводим только последнюю строку */
tr:last-child td, tr:last-child th {
  border-bottom: none;
}

Обход без бордюра для последней строки при переменном цвете ячеек:

/* Чередующийся фон без бордюра в конце */
tr:not(:last-child) td, tr:not(:last-child) th {
  border-bottom: 1px solid #ccc;
}

Теперь бордюры у ваших строк аккуратны, что будет корректно отображено во всех браузерах.

Завершение

Если у вас возникли вопросы относительно двойных или отдельных бордюров между ячейками, советуем использовать свойство border-collapse. Оно позволяет устранить нежелательные пропуски:

table {
  /* Теперь бордюры ячеек объединены */
  border-collapse: collapse;
}

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

Вообразим строку таблицы <tr> в качестве канатоходца, переходящего улицу из ячеек:

До:

| 🏠 | 🏠 | 🏠 | 🏠 |

Обеспечим нашего канатоходца страховочным тросом:

tr { border-bottom: 2px solid #000; }

И вот он идет мимо каждого дома в полной безопасности:

После:

| 🏠 | 🏠 | 🏠 | 🏠 |
|------------------| // Защитный трос натянут!

Каждая ячейка выделяется, создавая непрерывную линию вдоль всей строки.

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

1. Стилизация таблиц – MDN — Отличное руководство по работе со стилями границ таблиц.
2. CSS Table Styling – W3Schools — Подробное пособие по оформлению таблиц при помощи CSS.
3. Специфичность в CSS – CSS-Tricks — Глубокий анализ спецификации приоритетов CSS-селекторов.
4. Использование псевдоэлементов – CSS-Tricks — Обзор практического применения псевдоэлементов в дизайне.
5. Box Sizing – CSS-Tricks — Исчерпывающий обзор свойства box-sizing и его влияния на границы.
6. Responsive Tables – CSS-Tricks — Полезные рекомендации по созданию адаптивных таблиц.
7. Специфичность в CSS – Smashing Magazine — Обстоятельная аналитика спецификации селекторов, необходимая для понимания управления стилями в <tr>.