Egenskapen border-collapse

Egenskapen border-collapse får dubbla kanter mellan celler i td eller celler i th HTML-tabeller (och mellan cellens kant och själva tabellen) att sammanfalla och se ut som en.

Denna egenskap appliceras endast på tabeller och på element med display satt till värdet table eller inline-table. För vanliga blockelement kommer den, tyvärr, inte att fungera. Tänk på att den ska appliceras på tabellen, inte på dess celler.

Syntax

cssselector {
  border-collapse: collapse | separate;
}

Värden

Värde	Beskrivning
`collapse`	Dubbla kanter kommer att se ut som en. Har biverkningar: egenskapen `border-spacing` och attributet `cellspacing` slutar att fungera.
`separate`	Varje tabellcell kommer att ha sin egen kant (varför kanterna på vissa ställen blir dubbla om mellanrummet mellan cellerna är noll).

Standardvärde: separate.

Exempel . Värdet separate

För närvarande är alla kanter i tabellen dubbla (kant är satt till både celler och själva 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;
}

Результат:

Exempel . Värdet separate

Nu är kant satt till cellerna, men inte till själva tabellen. Där två celler delar en kant kommer kanterna att vara dubbla, på andra ställen - enkla:

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

Результат:

Exempel . Värdet collapse

Nu kommer alla kanter i tabellen att sammanfalla och se ut att vara 1px tjocka, precis som man önskar:

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

Результат: