border-collapse: объединение границ таблицы
border-collapse выбирает раздельную или объединённую модель границ ячеек HTML-таблицы.
Назначение
border-collapse выбирает раздельную или объединённую модель границ ячеек HTML-таблицы.
Как это работает
В режиме collapse соседние границы участвуют в разрешении конфликтов и выглядят общей линией. В separate ячейки имеют независимые границы, а расстояние между ними задаёт border-spacing.
Пример
<style>
table{border-collapse:collapse}th,td{border:1px solid #789;padding:10px;text-align:left}
</style>
<table><caption>Учебный план</caption><tr><th scope="col">Тема</th><th scope="col">Уроков</th></tr><tr><td>HTML</td><td>8</td></tr><tr><td>CSS</td><td>10</td></tr></table>Что должно получиться
Ячейки разделены общими тонкими линиями. Caption и заголовки сохраняют смысл таблицы независимо от выбранной модели границ.
Граница применения и частая ошибка
Не ожидайте, что border-spacing создаст промежутки при collapse. И не заменяйте таблицу набором div только ради тонких линий, если данные имеют настоящую табличную структуру.
Самостоятельная проверка
Переключите collapse на separate и задайте border-spacing:6px. Сравните число видимых линий между соседними ячейками и суммарный размер таблицы.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.