Справочник · CSS

border-collapse: одинарные линии у таблицы

Отдельные рамки ячеек по умолчанию стоят на расстоянии и выглядят двойными. collapse сливает их.

Как это работает

collapse подходит почти любой учебной таблице с сеткой. separate оставляет зазор, которым управляет border-spacing. Вместе с collapse проще задать одну линию на th и td. Не рисуй и внешнюю толстую рамку, и ещё линии у каждой ячейки другим цветом без проверки углов.

table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #e4ddd2; padding: 0.5rem; }

Когда использовать

Расписание, цены, сравнение. Карточки таблицей не рисуй.

Частые ошибки

• Линии получились двойными.
• После collapse пропали отступы, которые ждали от border-spacing.
• У ячеек нет padding, и текст прилип к линии.