Svojstvo border-collapse

Svojstvo border-collapse uzrokuje da se dvostruke granice između ćelija td ili ćelija th HTML tabele (i između granice ćelije i same tabele) spoje i izgledaju kao jedna.

Ovo svojstvo se primenjuje samo za tabele i za elemente sa display u vrednosti table ili inline-table. Za obične blok elemente ono, na veliku žalost, neće raditi. Imajte u vidu da se primenjuje na tabelu, a ne na njene ćelije.

Sintaksa

cssselektor {
  border-collapse: collapse | separate;
}

Vrednosti

Vrednost	Opis
`collapse`	Dvostruke granice će izgledati kao jedna. Postoje nuspojave: prestaće da radi svojstvo `border-spacing` i atribut `cellspacing`.
`separate`	Svaka ćelija tabele će imati svoju granicu (zato će na nekim mestima granice biti dvostruke, ako je razmak između ćelija nula).

Podrazumevana vrednost: separate.

Primer . Vrednost separate

Sada su u tabeli sve granice dvostruke (granica je postavljena i ćelijama, i samoj tabeli):

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;
}

Результат:

Primer . Vrednost separate

A sada je granica postavljena ćelijama, ali samoj tabeli nije postavljena. Tamo gde dve ćelije imaju zajedničku granicu, - granice će biti dvostruke, na ostalim mestima - jednostruke:

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;
}

Результат:

Primer . Vrednost collapse

Sada će se u tabeli sve granice spojiti i izgledaće debljine 1px, kao što je i želelo:

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;
}

Результат: