Својство 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;
}

Результат: