CSS: граница таблицы увеличена каждые 2-3 строки


Столкнулся с тем, что таблица с некоторой периодичностью рисует более толстые границы (сверху или снизу). Каждый вторая или третья строка таблицы имеет двойную границу:

Порыл через ‘inspect’ код css — не нашел лишних бордеров. В итоге, спустя плчаса выяснил, что это  проблема:

border-collapse: collapse;

Нужно поменять его на

border-collapse: separate;

При collapse граница между ячейками отображается одна и игнорируется cellspacing.

При separate — вокруг ячеек отображается своя собственная граница; в местах соприкосновения ячеек показываются сразу две линии.

В общем, благодаря collapse браузер может анализировать таблицу и убирать в ней двойные линии. Если у вас css трубочиста — скорее всего браузер напортачит, так что проще сидеть на separate.


Запись опубликована в рубрике HTML и CSS. Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *