Рамка и отступы HTML-таблицы
Вид, толщину, цвет рамки таблицы определяет свойство border . Его можно указать в атрибуте style .
Установить рамку каждой ячейке также можно с помощью атрибута style . Но предпочтительней стиль вынести в тег style или файл .css : кода меньше, возможности шире, удобства больше (чтобы изменить цвет рамки у всех ячеек, достаточно поменять значение один раз).
border-spacing : расстояние между ячейками таблицы
слева+справа
сверху+снизу initial 0 inherit наследует значение родителя unset наследует значение родителя
.raz < border-spacing: 0; /* или */ border-spacing: 0 0; /*border-collapseнаследуется, применяется только кtableилиinline-tableэлементам сborder-collapse: separate;*/ > .raz, .raz td
Убрать промежутки от ячеек до краёв таблицы
/* один из возможных вариантов сделать отступы вокруг ячеек таблицы */ .raz < border-spacing: 0; padding: 0 2em 3em 0; /* значенияleftиtopпоследних ячеек */ > .raz, .raz td < position: relative; border: 1px solid red; >.raz td:nth-child(2) < left: 1em; >.raz td:nth-child(3) < left: 2em; /* каждая дополнительная ячейка сдвигается на +1 единицу */ > .raz tr:nth-child(2) td < top: 1em; >.raz tr:nth-child(3) td < top: 2em; >.raz tr:nth-child(4) td
empty-cells : наличие границ и фона у пустых ячеек
show у пустой ячейки есть граница и фон hide у пустой ячейки нет границы и фона initial show inherit наследует значение родителя unset наследует значение родителя
.raz < empty-cells: show; /*empty-cellsнаследуется, применяется только кtableилиinline-tableэлементам сborder-collapse: separate;*/ > .raz, .raz td < border: 1px solid red; >.raz td
border-collapse : схлопывание границ ячеек
separate у каждой ячейки и таблицы в целом своя граница, игнорируется свойство border у thead , tfoot , tbody и tr collapse между ячейками и контейнером единая граница, отсутствуют двойные рамки таблицы, игнорируются свойства border-spacing , empty-cells , padding у table initial separate inherit наследует значение родителя unset наследует значение родителя
Жирные внешние границы таблицы
.raz < border-collapse: collapse; border: 4px solid red; > .raz td
Таблица без границ аки сетка без внешней рамки
.raz < border-collapse: collapse; border-style: hidden; > .raz td
Свойство border у tr
Свойство padding у table при border-collapse: collapse;
.raz < border-collapse: collapse; outline: 1px solid red; /* outline можно задавать только для четырёх сторон одновременно */ outline-offset: 2px; margin: 3px; /* outline-width + outline-offset = 1px + 2px = 3px */ > .raz, .raz td
Отступы внутри ячейки таблицы
Расстояние от содержимого до края ячейки определяет свойство padding .
Убрать внешние границы таблицы
а нужно сделать вот так, т.е. убрать внешнюю окантовку:
_________________________
_________________________
_________________________
_________________________
_________________________
_________________________
Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Убрать верхние и нижнии границы таблицы
Подскажите как сделать чтобы у 10-17 не было границ) сверху и снизу <table cellpadding="0".
Как убрать наружные границы вокруг таблицы в HTML
Здравствуйте! Я новичок в сфере HTML, сейчас передо мною стоит задание сверстать сайт с помощью.
Убрать границы в ячейках
Как убрать полностью границы в таблице, чтобы их вообще не было видно <div >
Убрать сдвоенные границы у table
На скрине видно сдвоенные границы. border-collapse пробовал, но толку 0. CSS: td < padding.
3825 / 2675 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
border:0;
Регистрация: 08.10.2012
Сообщений: 265
Сообщение было отмечено mrtoxas как решение
Решение
mrtoxas, 0 убирает не только наружнюю но и внутренние горизонтальные линии
1 2 3 4 5 6 7 8 9 10
TABLE{ width: 1000px; /* Ширина таблицы */ border-collapse: collapse; /* Убираем двойные линии между ячейками */ border: 2px solid white; /* Прячем рамку вокруг таблицы */ } TD, TH { padding: 3px; /* Поля вокруг содержимого таблицы */ border: 1px solid #999999; /* Параметры рамки */ text-align: left; /* Выравнивание по левому краю */ }
3825 / 2675 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
1 2 3 4 5 6 7 8 9 10 11
table { border-collapse: collapse; } tr:not(:last-child){ border-bottom:1px solid red; } td:not(:last-child):not(:first-child), th:not(:last-child):not(:first-child){ border-left:1px solid red; border-right:1px solid red; }
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Убрать границы между ячейками
Вы можете изменить фон на цвет, чтобы их увидеть, вообщем — в районе навигации по сайту, видны.
Видны границы у изображения в гугл хром и ИЕ, как их можно убрать?
видно что есть граница, странно, но в firefox, opera и safari такого не наблюдается, че это с ними?
Не отображаются границы таблицы
Всем привет вообщем кое как понял как сделать Ну столкнулся с такой проблемой что ячейки создались.
Границы таблицы в CSS
Убрать границу таблицы не получается в CSS. table td < .
Или воспользуйтесь поиском по форуму:
Как убрать границу между ячейками таблицы html?
Всем привет) Не могу убрать границу между определенными ячейками html-таблицы, но при этом не объдиняя их. И оставить отступы других ячеек без изменения. Ячейка должна выглядеть как одна, но по факту там их две.
Отслеживать
задан 30 июл 2022 в 3:42
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
Сетка таблицы
Для создания таблицы показанной на рис. 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
В данном примере толщина линий между ячейками составляет один пиксел, а белая рамка вокруг — два пиксела, т.е. на один пиксел больше. Это требуется для того, чтобы надежно скрыть внешнюю границу вокруг таблицы.