Css collapse table: border-collapse | CSS-Tricks — CSS-Tricks

Leave a Comment / Css / By /

➥ border-collapse — htmlbook.info

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

Значение по умолчаниюseparate
НаследуетсяНет
ПрименяетсяК тегу <table> или к элементам, у которых значение display установлено как table или inline-table
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3
    

Описание

Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 1а). Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии (рис. 1б). При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.

аб

Рис. 1. Вид таблицы при использовании свойства border-collapse

Синтаксис

border-collapse: collapse | separate | inherit

Значения

collapse
Линия между ячейками отображается только одна, также игнорируется значение атрибута cellspacing.
separate
Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии.
inherit
Наследует значение родителя.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-collapse</title>
  <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>&nbsp;</th><th>2013</th>
    <th>2014</th><th>2015</th>
   </tr>
   <tr> 
    <td>Нефть</td><td>43</td>
    <td>51</td><td>79</td>
   </tr>
   <tr> 
    <td>Золото</td><td>29</td>
    <td>34</td><td>48</td>
   </tr>
   <tr> 
    <td>Дерево</td><td>38</td>
    <td>57</td><td>36</td>
   </tr>
  </table> 
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Вид таблицы при использовании свойства border-collapse

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit. В IE6 и IE7 не отменяется действие атрибута cellspacing.

CSS: свойство border-collapse

В этом руководстве по CSS объясняется, как использовать свойство CSS под названием border-collapse с синтаксисом и примерами.

Описание

Свойство CSS border-collapse определяет модель рендеринга, используемую для границ таблицы, которая влияет на внешний вид таблицы.

Синтаксис

Синтаксис свойства CSS border-collapse:

 border-collapse: значение;

Параметры или аргументы

значение

Модель рендеринга, применяемая к границам таблицы. Это может быть одно из следующих значений:

.

Значение Описание
отдельный Используйте модель разделенных границ для визуализации границ таблицы
table { border-collapse: отдельной; }
обрушение Использовать свернутую модель границ для визуализации границ таблицы
таблица { граница коллапса: коллапс; }
унаследовать Элемент унаследует схлопывание границы от своего родительского элемента
table { border-collapse: inherit; }

Примечание

  • Свойство border-collapse применяется к элементу и по умолчанию равно , отдельному .
  • Модель с разделенными границами визуализирует таблицу таким образом, что соседние ячейки имеют свои собственные границы, которые не являются общими, а свойство border-spacing определяет расстояние между ячейками.
  • Модель со свернутыми границами визуализирует таблицу таким образом, что соседние ячейки имеют общие границы.

    • Совместимость с браузерами

    Свойство CSS border-collapse имеет базовую поддержку следующих браузеров:

    • Chrome
    • Firefox (Геккон)
    • Internet Explorer 5+ (IE 5+)
    • Опера
    • Сафари (веб-кит)

    Пример

    Мы обсудим свойство border-collapse ниже, исследуя примеры использования этого свойства в CSS.

    Давайте сначала рассмотрим пример применения модели разделенных границ к нашей таблице. Например:

    CSS будет выглядеть следующим образом:

     таблица {граница-коллапс: отдельная; граница: 1px сплошной красный; }
th {граница: 1px сплошной синий; }
td {граница: 1px сплошной черный; }

    HTML будет выглядеть так:

    Таблица с использованием модели с разделенными границами будет выглядеть так:

    В этом примере CSS border-collapse мы установили для свойства border-collapse значение , отдельные для тега

    Заголовок столбца 1 Заголовок столбца 2
    techonthenet. com Технический справочный сайт
    checkyourmath.com Сайт математических расчетов
    bigactivities.com Детский сайт
    , который отображает таблица с использованием модели с разделенными границами (по умолчанию для HTML-таблиц). Как видите, соседние ячейки имеют свои четкие границы.

    Теперь мы изменим нашу таблицу, чтобы использовать модель свернутых границ, изменив свойство border-collapse на

    свернуть и посмотреть, что произойдет:

     таблица { границы-свернуть: свернуть; граница: 1px сплошной красный; }
th {граница: 1px сплошной синий; }
td {граница: 1px сплошной черный; }

    Теперь, используя модель свернутых границ, наша таблица будет выглядеть так:

    Как видите, наша таблица визуализируется с использованием модели свернутых границ, в результате чего соседние ячейки имеют общие границы. Это может уменьшить пустое пространство между ячейками таблицы и удалить некоторые стили границ таблицы, поскольку границы теперь являются общими.

    свернуть границу с использованием атрибута HTML спросил

    Изменено 6 лет, 3 месяца назад

    Просмотрено 17 тысяч раз

    Доступен ли атрибут HTML, эквивалентный свойству CSS border-collapse: Collapse; ?

    Я пытаюсь добиться той же границы в 1 пиксель только с помощью HTML и без использования css.

     таблица{
  граница коллапса: коллапс;
}

    Вы можете попробовать Cellspacing .

     <граница таблицы = "1px" Cellspacing = "0" CellPadding = "3">

    Примечание: Cellspacing

    не перекрывает границы соседних ячеек, что делает свойство CSS.

    8

    Вы можете использовать ячейки или ячейки, но это не рекомендуется в HTML5

    0

    я не понимаю, почему вы хотите прекратить использовать CSS, потому что это то, что делает CSS вы можете использовать boostrap css включен внутри. для получения дополнительной информации перейдите на w3chools

    Базовая таблица
    Класс .table добавляет к таблице основные стили (легкие отступы и только горизонтальные разделители):
     <таблица>
    Строка 1 Строка 1 Строка 1
    Ряд 2 Ряд 2 Ряд 2
    Строка 1 Строка 1 Строка 1
    Ряд 2 Ряд 2 Ряд 2
    ИмяФамилияЭлектронная почта
    ДжонДоуjohn@example.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *