Border-collapse-ominaisuus

Ominaisuus border-collapse pakottaa td -solujen tai th -solujen väliset kaksoisreunat HTML-taulukossa (sekä solun reunan ja taulukon reunan väliset) yhtymään ja näyttämään yhdeltä reunalta.

Tätä ominaisuutta sovelletaan vain taulukoihin ja elementteihin, joiden display -ominaisuuden arvo on table tai inline-table. Tavallisille lohkoelementeille se, valitettavasti, ei toimi. Huomaa, että ominaisuus tulee asettaa taulukolle, eikä sen soluille.

Syntaksi

cssvalitsija {
  border-collapse: collapse | separate;
}

Arvot

Arvo	Kuvaus
`collapse`	Kaksoisreunat näyttävät yhdeltä reunalta. On sivuvaikutuksia: ominaisuus `border-spacing` ja attribuutti `cellspacing` eivät toimi.
`separate`	Jokaisella taulukon solulla on oma reuna (siksi joissakin kohdissa reunat ovat kaksoisreunoja, jos solujen välinen väli on nolla).

Oletusarvo: separate.

Esimerkki . Arvo separate

Tällä hetkellä taulukossa kaikki reunat ovat kaksinkertaisia (reuna on asetettu sekä soluille että taulukolle itselleen):

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

Результат:

Esimerkki . Arvo separate

Nyt reuna on asetettu soluille, mutta taulukolle itselleen ei ole asetettu. Siellä, missä kahdella solulla on yhteinen reuna, - reunat ovat kaksinkertaiset, muissa paikoissa - yksittäiset:

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

Результат:

Esimerkki . Arvo collapse

Nyt taulukossa kaikki reunat yhdistyvät ja näyttävät 1px paksuisilta, kuten haluttiinkin:

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

Результат: