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

Свойство CSS border-collapse отвечает за правило отрисовки границ между ячейками в таблице html.

Синтаксис CSS border-collapse

border-collapse: collapse | separate | inherit;

Где:

  • collapse – линия между соседними границами будет общая (одна линия);
  • separate (по умолчанию) – у каждой ячейки своя граница;
  • inherit – применяется значение родительского элемента;

Свойство очень важное, т.к. это единственный способ корректно указать нужное значение толщины линии границы у таблиц.

Пример со свойством border-collapse

<html>
<body>
<table align="center" width="auto" border="2" cellpadding="5" cellspacing="2">
<tr>
<td>
Столбец 1
</td>
<td>
Столбец 2
</td>
<td>
Столбец 3
</td>
</tr>
<tr>
<td>
Столбец 1
</td>
<td>
Столбец 2
</td>
<td>
Столбец 3
</td>
</tr>
<tr>
<td>
Столбец 1
</td>
<td>
Столбец 2
</td>
<td>
Столбец 3
</td>
</tr>
</table>
<br/>
<table style="border-collapse: collapse" align="center" width="auto" border="2" cellpadding="5" cellspacing="2">
<tr>
<td>
Столбец 1
</td>
<td>
Столбец 2
</td>
<td>
Столбец 3
</td>
</tr>
<tr>
<td>
Столбец 1
</td>
<td>
Столбец 2
</td>
<td>
Столбец 3
</td>
</tr>
<tr>
<td>
Столбец 1
</td>
<td>
Столбец 2
</td>
<td>
Столбец 3
</td>
</tr>
</table>
</body>
</html>

Вот как это выглядит на странице:


Столбец 1

Столбец 2

Столбец 3

Столбец 1

Столбец 2

Столбец 3

Столбец 1

Столбец 2

Столбец 3


Столбец 1

Столбец 2

Столбец 3

Столбец 1

Столбец 2

Столбец 3

Столбец 1

Столбец 2

Столбец 3




Читайте также:

• Как сделать треугольник через CSS

• Свойство text-transform

• Свойство text-align

• Свойство vertical-align

• Свойство text-indent

• Свойство font

• Свойство text-decoration

• Свойство cursor (Курсоры)

• Свойство css background

• Свойство css transition

• Свойство CSS position


← Перейти в каталог CSS уроков

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.