Свойство border-collapse - схлопывание границ
Свойство border-collapse заставляет
двойные границы между ячейками td
или ячейками th
HTML таблицы
(и между границей ячейки и самой таблицы)
схлопнуться и выглядеть как одна.
Данное свойство применяется только для таблиц
и для элементов с display
в значении table или inline-table. Для обычных
блочных элементов оно, к большому сожалению,
работать не будет. Учтите, что применять
следует для таблицы, а не для ее ячеек.
Синтаксис
селектор {
border-collapse: collapse | separate;
}Значения
| Значение | Описание |
|---|---|
collapse |
Двойные границы будут выглядеть как одна.
Есть побочные эффекты: перестанет работать свойство
border-spacing
и атрибут cellspacing.
|
separate |
Каждая ячейка таблицы будет иметь свою границу (поэтому в некоторых местах границы будут двойными, если промежуток между ячейками нулевой). |
Значение по умолчанию: separate.
Пример . Значение separate
Сейчас в таблице все границы двойные (граница задана и ячейкам, и самой таблице):
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>table {
border-collapse: separate;
width: 400px;
border-spacing: 0;
border: 1px solid red;
}
td {
border: 1px solid red;
text-align: center;
}:
Пример . Значение separate
А сейчас граница задана ячейкам, но самой таблице не задана. Там, где две ячейки имеют общую границу, - границы будут двойные, в остальных местах - одиночные:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>table {
border-collapse: separate;
width: 400px;
border-spacing: 0;
}
td {
border: 1px solid red;
text-align: center;
}:
Пример . Значение collapse
Сейчас в таблице все границы схлопнутся и
станут выглядеть толщиной в 1px, как
и хотелось бы:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>table {
border-collapse: collapse;
width: 400px;
border: 1px solid red;
}
td {
border: 1px solid red;
text-align: center;
}: