Border-collapse

Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Ошибки Да Да Да Да Да Да Да Да Да Да Да

 

CSS CSS1, CSS2.1
Значение по умолчанию separate
Наследуется Нет
Применяется К тегу <TABLE> или к элементам, у которых значение display установлено как table или inline-table
Аналог HTML Нет

Описание

Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины. Значение 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: 300px; /* Ширина таблицы */     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>

Браузеры

Internet Explorer до седьмой версии включительно не поддерживает значение inherit.

Internet Explorer 8 ошибочно отрисовывает границу при значении hidden свойства border-style.