Как убрать расстояние между ячейками таблицы с помощью CSS.

Продолжаем заметку о создании границ для таблиц и настройке их отображения с помощью CSS.

В прошлой заметке мы остановились на том, что у нас получилась вот такая таблица.

Проблема была в том, что у этой таблицы имеется большое расстояние между ячейками. Очень желательно было бы это расстояние убрать.

Сейчас я покажу очень простую технику, которая позволит решить эту проблему.

Все, что нужно сделать, это добавить к таблице одно свойство CSS:

border-collapse:collapse;

Это свойство убирает все внутренние отступы между ячейками.

В итоге это будет выглядеть вот так:

HTML:

<table>
<tr>
<td>Столбец 1</td>
<td>Столбец 2</td>
</tr>
<tr>
<td>Столбец 1</td>
<td>Столбец 2</td>
</tr>
</table>

CSS:

table td {border:1px solid #000;}
table {border-collapse:collapse;}

И таблица принимает следующий вид:

Теперь все как надо. Мы убрали то самое не нужное пространство.