Оглавление

Удаление пустого пространства между ячейками, появляющегося после добавления рамок

Вы наверняка когда-нибудь пытались удалить пустое пространство между ячейками с помощью атрибута cellspacing=”0” элемента table. Однако в результате получалась рамка толщиной в два пиксела, поскольку рамки соприкасаются, но не перекрывают друг друга. Ниже приводится метод создания аккуратной однопиксельной рамки вокруг ячеек.

 

Решение
Пустое пространство между ячейками можно убрать путем присвоения значения collapse свойству border-collapse:


.datatable {
border: 1px solid #338BA6;
border-collapse: collapse;
}
.datatable td, .datatable th {
border: 1px solid #73C0D4;
}

На рис. 5.4. показана таблица до применения свойства border-collapse;

 

на рис. 5.5 отображается эффект применения данного свойства.

 

Рис. 5.4. таблица до применения свойства border-collapse;

 

Перекрытие рамок таблицы

Рис. 5.5. Перекрытие рамок таблицы

Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити