Сетка таблицы
Для создания таблицы показанной на рис. 1 потребуется всего ничего: установить стилевое свойство border для каждой ячейки и воспользоваться свойством border-collapse .
Рис. 1. Вид таблицы с сеткой
При добавлении свойства border к селектору TD или TH между ячейками возникают двойные линии, которые образуются за счет соприкосновения рамок вокруг ячеек. Чтобы этого не произошло, для селектора TABLE указывается свойство border-collapse со значением collapse , как показано в примере 1.
Пример 1. Создание сетки
Таблица 2004 2005 2006 Рубины 43 51 79 Изумруды 28 34 48 Сапфиры 29 57 36
В данном примере также устанавливается цвет фона для ячеек заголовка (тег ) через свойство background .
Как вариант, можно вообще убрать рамку вокруг таблицы, оставив только линии внутри нее (рис. 2).
Рис. 2. Сетка внутри таблицы
При этом удобнее всего будет не убрать рамку, а спрятать ее, задав ей цвет, совпадающий с цветом фона веб-страницы. Так, в примере 2 фон страницы задан белым и такого же цвета используется граница, которая добавляется к селектору TABLE .
Пример 2. Таблица без внешней рамки
Таблица 2004 2005 2006 Рубины 43 51 79 Изумруды 28 34 48 Сапфиры 29 57 36
В данном примере толщина линий между ячейками составляет один пиксел, а белая рамка вокруг — два пиксела, т.е. на один пиксел больше. Это требуется для того, чтобы надежно скрыть внешнюю границу вокруг таблицы.
border-collapse
Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 1а). Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии (рис. 1б). При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.
 |
 |
| а | б |
Рис. 1. Вид таблицы при использовании свойства border-collapse
Синтаксис
border-collapse: collapse | separate | inherit
Значения
collapse Линия между ячейками отображается только одна, также игнорируется значение атрибута cellspacing . separate Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
border-collapse 2013 2014 2015 Нефть 43 51 79 Золото 29 34 48 Дерево 38 57 36
Результат данного примера показан на рис. 2.
Рис. 2. Вид таблицы при использовании свойства border-collapse
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit . В IE6 и IE7 не отменяется действие атрибута cellspacing .
Как убрать границу между ячейками таблицы html?
Всем привет) Не могу убрать границу между определенными ячейками html-таблицы, но при этом не объдиняя их. И оставить отступы других ячеек без изменения. Ячейка должна выглядеть как одна, но по факту там их две.
Отслеживать
задан 30 июл 2022 в 3:42
1 1 1 серебряный знак 1 1 бронзовый знак
Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете.
30 июл 2022 в 4:54
В макете сайта есть таблица (изображение таблицы: wampi.ru/image/RrKzPDO ) и там с виду одна колонка справа в tbody, но информация разделена на две ячейки. Может это как-нибудь по другому можно сделать?
30 июл 2022 в 5:23
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Манипулировать отступами между отдельным ячейками в таблице нельзя, можно пойти другим путем и использовать дополнительные элементы с position:absolute в td для создания border и эффекта отступа.
table < border: 3px solid #009dff; text-align: center; width: 100%; table-layout: fixed; border-spacing: 0; padding: 2px; font-family: arial; >thead < background-color: #f4af16; color: white; >thead tr:first-of-type td < border-bottom: 1px solid white; >thead tr:last-of-type td < border-bottom: 2px solid white; >tbody tr < position: relative; >tbody .border < position: absolute; border: 1px solid black; left: 0px; top: 2px; right: 0px; bottom: 2px; display: block; >td
Количество в коробке Штук Килограм 12000 18,48 12000 18,48 12000 18,48 12000 18,48
Убираем границы в HTML-таблице для эффекта фоторамки
В HTML-таблице можно убрать все границы, если задать для элементов table, th, td свойство border со значением 0 и border-collapse со значением collapse:
Скопировать код
table, th, td
Такой CSS-код полностью удалит границы, делая таблицу элегантной и чистой.
Подробное руководство по созданию таблицы без границ
Для того, чтобы ваша таблица отображалась безупречно и без границ, следует учесть несколько ключевых аспектов.
Избавление от границ при помощи CSS
Чтобы таблицы не имели границ, примените класс .noBorder . Этот стиль будет использован для всех таблиц, строк и ячеек, у которых нет границ: