Как убрать расстояние между ячейками таблицы с помощью CSS.
Продолжаем заметку о создании границ для таблиц и настройке их отображения с помощью CSS.
В прошлой заметке мы остановились на том, что у нас получилась вот такая таблица.
Проблема была в том, что у этой таблицы имеется большое расстояние между ячейками. Очень желательно было бы это расстояние убрать.
Сейчас я покажу очень простую технику, которая позволит решить эту проблему.
Все, что нужно сделать, это добавить к таблице одно свойство CSS:
border-collapse:collapse;
Это свойство убирает все внутренние отступы между ячейками.
В итоге это будет выглядеть вот так:
| Столбец 1 | Столбец 2 |
| Столбец 1 | Столбец 2 |
table td table
И таблица принимает следующий вид:
Теперь все как надо. Мы убрали то самое не нужное пространство.
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
как убрать границы в html таблице
Здравствуйте. есть сайт написанный в html построен таблицами верхняя горизонтальная и левая вертикальная без ячеек т.е. две рамки. нужно убрать верхнюю и боковые рамки у верхней таблицы. у левой таблицы нужно убрать нижнюю, верхнюю, левую границу. как это сделать. вот код:
Лучший ответ
в теге Table ставишь border=»0″
затем в тегагх ячеек таблици прописываешь стиль.
например: style =»border-left:1px solid #000000;»
border-left — граница слева
border-right — справа
border-top — сверху
border-bootom — снизу
1px — толщена линии
solid — сплошная линия
#000000 — 16-ричный код цвета в формате RGB (#ff0000 — красный)
Остальные ответы
По моему (table border=»0″). В круглых скобках пишется специально, чтобы текст отобразился (т. е. Вы смогли его увидеть) , а не обработался в браузере.
Как полностью убрать границы между ячейками таблицы?
Следовательно сам вопрос — как сделать, чтобы разрыва между линиями (или между ячейками таблицы, что на мой взгляд 1 и то же) не было видно?
Ссылка на комментарий
Поделиться на других сайтах
Больше способов поделиться.
12 ответов на этот вопрос
- Сортировать по голосам
- Сортировать по дате
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
border-collapse¶
Свойство border-collapse устанавливает, как отображать границы вокруг ячеек таблицы.
Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 1а). Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии (рис. 1б). При этом между ячейками остаётся только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.
Демо¶
Когда ячейки свернуты, значение inset в border-style ведет себя как groove , а outset ведет себя как ridge .
Когда ячейки разделены, расстояние между ячейками определяется свойством border-spacing .
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- box-shadow
Колонки и таблицы
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
Синтаксис¶
1 2 3 4 5 6 7 8 9 10
/* Keyword values */ border-collapse: collapse; border-collapse: separate; /* Global values */ border-collapse: inherit; border-collapse: initial; border-collapse: revert; border-collapse: revert-layer; border-collapse: unset; Значения¶
Линия между ячейками отображается только одна, также игнорируется значение атрибута cellspacing .
Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии.
border-collapse: separate; Применяется к элементу или к элементам, у которых значение display установлено как table или inline-table .
Спецификации¶
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
html> head> meta charset="utf-8" /> title>border-collapsetitle> style> table width: 100%; /* Ширина таблицы */ border: 4px double black; /* Рамка вокруг таблицы */ border-collapse: collapse; /* Отображать только одинарные линии */ > th text-align: left; /* Выравнивание по левому краю */ background: #ccc; /* Цвет фона ячеек */ padding: 5px; /* Поля вокруг содержимого ячеек */ border: 1px solid black; /* Граница вокруг ячеек */ > td padding: 5px; /* Поля вокруг содержимого ячеек */ border: 1px solid black; /* Граница вокруг ячеек */ > style> head> body> table> tr> th>th> th>2013th> th>2014th> th>2015th> tr> tr> td>Нефтьtd> td>43td> td>51td> td>79td> tr> tr> td>Золотоtd> td>29td> td>34td> td>48td> tr> tr> td>Деревоtd> td>38td> td>57td> td>36td> tr> table> body> html>