Устраняем пробелы между строками и столбцами в таблице HTML

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

Чтобы устранить излишнее пространство в HTML-таблице, примените border-collapse: collapse; к тегу <table>, обнулив внутренние отступы с помощью padding: 0; для <td> и <th>, вот так:

table {
  border-collapse: collapse;
}

td, th {
  padding: 0;
}

Если пространство возникает из-за изображений, назначьте им display: block и используйте line-height: 0; для устранения пробелов. С целью обеспечения совместимости добавьте атрибут cellspacing="0" к <table>.

Оптимальное оформление таблицы

Чтобы достичь пиксельной точности в таблицах:

• Задайте width и height для <td>, чтобы они точно Особенности Internet Explorer соответствовали размерам содержимого.
• Примените vertical-align: bottom для устранения пробелов под содержимым ячеек.

История границ и отступов

Особенности Internet Explorer

В зависимости от версии Internet Explorer использование атрибута cellspacing представлено ниже:

<table cellspacing="0"> <!-- Методика для старых версий браузера -->
  <!-- ваш контент таблицы -->
</table>

• Internet Explorer 7 и ранее поддерживают cellspacing.
• Internet Explorer 8 и более поздние версии хорошо работают с CSS-свойством border-spacing: 0;.

Подробнее об этом расскажет наш спикер на видео

Гармония в визуализации

Для создания целостного визуального ряда изображений, подобно мозаике:

• Размеры td должны точно соответствовать размерам вложенных изображений.
• Чтобы изображения полностью заполняли ячейки, задайте им display: block.
• Используйте border-spacing: 0; для создания идеального плиточного соединения.

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

Удаление излишних пространств в таблице можно представить как выравнивание тротуарной плитки:

До: [👣_ _👣, 👣_ _👣]
После: [👣👣, 👣👣]

В мире CSS мы уважаем эти мощные свойства:

td, th { 
  padding: 0; /* удаляем пустоты */
  border-spacing: 0; /* заботимся о близости */
  border-collapse: collapse; /* сплочаем элементы вместе */
}

Результат: Гладкий ряд, в котором отпечатки ног (👣) идут строго друг за другом, не нарушая ритм.

Решение специфических задач верстки

Вопросы совместимости в электронной почте

Почтовые клиенты могут быть капризными и неожиданными. Применяйте CSS с учётом этого, чтобы предотвратить нежелательные сюрпризы:

• Используйте border-collapse: collapse; в рассылках с особой осторожностью, так как почтовые клиенты иногда реагируют непредсказуемо.
• Встроенные стили в письмах станут вашими надёжными помощниками.

Борьба с нежелательными пространствами элементов с display inline-block

Элементы с display: inline-block могут создавать лишние отступы. Ваша стратегия:

• Установите font-size: 0; для родительского элемента, чтобы удалить пробелы от inline-block.
• Восстановите исходный font-size для дочерних элементов, чтобы текст остался читабельным.

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

1. CSS Styling Tables — пошаговое руководство по стилизации таблиц и удалению пробелов.
2. A Complete Guide to the Table Element | CSS-Tricks — подробное описание возможностей элемента таблицы, включая сжатие границ.
3. border-collapse – CSS: Cascading Style Sheets | MDN — исчерпывающий обзор свойства border-collapse с примерами.
4. box-sizing – CSS: Cascading Style Sheets | MDN — исследование свойства box-sizing и его влияния на компоновку таблиц.
5. What Is A CSS Reset? – CSS Reset — освежите свои знания о CSS Reset, который помогает устранить браузерные отступы.
6. Design better data tables. The ingredients of a successful data… | by Andrew Coyle | Medium — погрузитесь в дизайн таблиц и пользовательских интерфейсов.