Свойство BORDER-COLLAPSE

Браузер Internet Explorer Firefox Mozilla Opera Netscape Safari
Версия 5.5 6.0 7.0 1.0 2.0 1.7 7.0 8.0 9.0 6.0 7.0 8.0 1.0
Поддержка Поддерживается Поддерживается Поддерживается Поддерживается Поддерживается Поддерживается Поддерживается Поддерживается Поддерживается Поддерживается Поддерживается Поддерживается Поддерживается

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

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

Описание

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

Аргументы

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

Пример

Валидный HTML
Валидный CSS
<!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: 320px; /* Ширина таблицы */
 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>2003</th>
<th>2004</th>
<th>2005</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>

Комментарий