Добрий день. Таблиця як елемент має свої особливості, які сильно відрізняють її від більш звичних багатьом блоків. Сьогодні я хотів би розповісти про те, як прописується в css відстань між осередками таблиці.
Відмінності з блочною моделлю
Щоб ставити відстань між блоками зазвичай використовують зовнішні відступи, але у випадку з осередками це не працює. Внутрішні відступи осередків можна прописати, а ось зовнішні - немає.
Це начебто і невелика біда, тільки ось за замовчуванням осередку в таблиці розташовані не впритул один до одного, а з невеликими відступами, які не завжди потрібні. Як їх прибрати?
Властивість border-spacing
На допомогу приходить властивість, яке в css застосовується спеціально для табличних даних - border-spacing. Як можна зрозуміти з назви, воно визначає вільний простір (відступи) від кожного осередку.
Важливий момент: задавати border-spacing потрібно всій таблиці. Тобто ось так:
Цим правилом ми прибираємо відстань між осередками і тепер вони щільно притиснуті один до одного. Відповідно, у точках ви можете задати це відстань, якщо це буде необхідно.
Можливо, трохи незвично, що властивість задається для селектора table, але це така особливість таблиці, просто потрібно запам'ятати її. Властивість не буде працювати, якщо для таблиці також задати border-collapse: collapse. В такому випадку у осередків автоматично забираються зовнішні відступи, і необхідності в border-spacing немає ніякої.
Застарілий спосіб задати зовнішні відступи осередкам
Раніше для цього до тегу