Egenskapen border-collapse

Egenskapen border-collapse får doble rammer mellom celler td eller celler th i en HTML tabell (og mellom cellens ramme og selve tabellen) til å kollapse og se ut som én.

Denne egenskapen gjelder bare for tabeller og for elementer med display satt til verdien table eller inline-table. For vanlige blokkelementer vil det, dessverre, ikke fungere. Vær oppmerksom på at den skal brukes på tabellen, ikke på cellene.

Syntaks

cssselector {
  border-collapse: collapse | separate;
}

Verdier

Verdi	Beskrivelse
`collapse`	Doble rammer vil se ut som én. Det er bivirkninger: egenskapen `border-spacing` og attributtet `cellspacing` vil slutte å fungere.
`separate`	Hver celle i tabellen vil ha sin egen ramme (derfor vil rammene være doble på noen steder, hvis avstanden mellom cellene er null).

Standardverdi: separate.

Eksempel . Verdien separate

Nå er alle rammene i tabellen doble (ramme er satt både på cellene og på selve tabellen):

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

Результат:

Eksempel . Verdien separate

Nå er rammen satt på cellene, men ikke på selve tabellen. Der hvor to celler deler en felles ramme, vil rammene være doble, på andre steder - enkle:

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

Результат:

Eksempel . Verdien collapse

Nå vil alle rammer i tabellen kollapse og se ut med en tykkelse på 1px, slik man ønsker seg:

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

Результат: