A border-collapse tulajdonság

A border-collapse tulajdonság arra kényszeríti a kettős szegélyeket a td vagy a th cellák között egy HTML táblázatban (és a cella szegélye és maga a táblázat szegélye között), hogy összeolvadjanak és egyetlen szegélyként jelenjenek meg.

Ez a tulajdonság csak táblázatokra és olyan elemekre vonatkozik, melyek display tulajdonsága table vagy inline-table. Sajnos közönséges blokkos elemeken nem fog működni. Vegye figyelembe, hogy a táblázatra kell alkalmazni, nem a celláira.

Szintaxis

cssszelektor {
  border-collapse: collapse | separate;
}

Értékek

Érték	Leírás
`collapse`	A kettős szegélyek egyetlen szegélyként fognak megjelenni. Vannak mellékhatások: a `border-spacing` tulajdonság és a `cellspacing` attribútum megszűnik működni.
`separate`	A táblázat minden cellája meg fogja tartani a saját szegélyét (emiatt néhány helyen a szegélyek kettősnek tűnnek, ha a cellák közötti távolság nulla).

Alapértelmezett érték: separate.

Példa . Separate érték

Jelenleg a táblázatban minden szegély kettős (szegély van megadva mind a celláknak, mind magának a táblázatnak):

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

Результат:

Példa . Separate érték

Most a szegély a celláknak van megadva, de magának a táblázatnak nincs. Ahol két cellának van közös szegélye, ott a szegély kettősnek fog tűnni, minden más helyen pedig egyszerűnek:

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

Результат:

Példa . Collapse érték

Most a táblázatban minden szegély összeolvad és 1px vastagnak fog megjelenni, ahogy azt szerettük volna:

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

Результат: