Свойство border-collapse

Свойството border-collapse кара двойните граници между клетките td или клетките th на HTML таблица (и между границата на клетката и самата таблица) да се схлопнат и да изглеждат като една.

Това свойство се прилага само за таблици и за елементи с display със стойност table или inline-table. За обикновени блочни елементи, за съжаление, няма да работи. Имайте предвид, че трябва да се прилага за таблицата, а не за нейните клетки.

Синтаксис

cssселектор {
  border-collapse: collapse | separate;
}

Стойности

Стойност	Описание
`collapse`	Двойните граници ще изглеждат като една. Има странични ефекти: свойството `border-spacing` и атрибутът `cellspacing` спират да работят.
`separate`	Всяка клетка от таблицата ще има своя собствена граница (затова на някои места границите ще бъдат двойни, ако разстоянието между клетките е нула).

Стойност по подразбиране: separate.

Пример . Стойност separate

В момента в таблицата всички граници са двойни (граница е зададена както на клетките, така и на самата таблица):

html<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>

csstable {
  border-collapse: separate;
  width: 400px;
  border-spacing: 0;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

Пример . Стойност separate

А сега граница е зададена на клетките, но на самата таблица не е зададена. Там, където две клетки имат обща граница, - границите ще бъдат двойни, на останалите места - единични:

html<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>

csstable {
  border-collapse: separate;
  width: 400px;
  border-spacing: 0;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

Пример . Стойност collapse

Сега в таблицата всички граници ще се схлопнат и ще изглеждат с дебелина 1px, както бихме искали:

html<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>

csstable {
  border-collapse: collapse;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат: