Русский
Русский
English
Свойства CSS
Статистика
Реклама

border-collapse

Браузер
Internet Explorer
Chrome
Opera
Safari
Firefox
Версия
6.0
7.0
8.0
9.0
2.0
3.0
4.0
5.0
9.2
9.6
10
2.0
3.1
4.0
5.0
2.0
3.0
3.6
4.0
Поддержка
Частичная поддержка
Частичная поддержка
Возможно неправильное отображение
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Краткая информация
CSS CSS2+
Значение по умолчанию separate
Наследуется Нет
Применяется К тегу <TABLE> или к элементам, у которых значение display установлено как table или inline-table
Ссылка на спецификацию открыть в новой вкладке
Описание
Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 1а). Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии (рис. 1б). При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.
а                                                    б
Рис. 1. Вид таблицы при использовании свойства border-collapse
Синтаксис
border-collapse: collapse | separate | inherit
Аргументы
collapse - Линия между ячейками отображается только одна.
separate - Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии.
inherit - Наследует значение родителя.
Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>border-collapse</title>
<style type="text/css">
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 cellspacing="0">
  <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>

Демонстрация примера
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.
Internet Explorer 8 ошибочно отрисовывает границу при значении hidden свойства border-style.
Первоисточник - htmlbook.ru Автор - Влад Мержевич
Комментариев (-)
Имя
Электронная почта

Последние комментарии

© 2006-2025, heroes-3.ru