Proprietà border-collapse

La proprietà border-collapse fa sì che i doppi bordi tra le celle td o le celle th della tabella HTML (e tra il bordo della cella e la tabella stessa) si collassino e appaiano come uno solo.

Questa proprietà si applica solo alle tabelle e agli elementi con display impostato su table o inline-table. Purtroppo, non funzionerà per normali elementi blocco. Tieni presente che deve essere applicata alla tabella, e non alle sue celle.

Sintassi

cssselettore {
  border-collapse: collapse | separate;
}

Valori

Valore	Descrizione
`collapse`	I doppi bordi appariranno come uno solo. Ci sono effetti collaterali: la proprietà `border-spacing` e l'attributo `cellspacing` cessano di funzionare.
`separate`	Ogni cella della tabella avrà il proprio bordo (pertanto in alcuni punti i bordi saranno doppi, se lo spazio tra le celle è zero).

Valore predefinito: separate.

Esempio . Valore separate

Ora nella tabella tutti i bordi sono doppi (il bordo è impostato sia per le celle che per la tabella stessa):

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

Результат:

Esempio . Valore separate

Ora il bordo è impostato per le celle, ma non per la tabella stessa. Laddove due celle hanno un bordo in comune, i bordi saranno doppi, negli altri punti - singoli:

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

Результат:

Esempio . Valore collapse

Ora nella tabella tutti i bordi collasseranno e appariranno con uno spessore di 1px, come sarebbe desiderabile:

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

Результат: