Proprietà CSS border-collapse

La proprietà CSS border-collapse definisce se i bordi delle celle di una tabella vengono mantenuti separati o collassati in un unico bordo condiviso.

Per impostazione predefinita, ogni cella in un <table> disegna il proprio bordo, quindi il confine tra due celle adiacenti è in realtà composto da due bordi affiancati (più l'eventuale spazio tra di essi). Questo dà spesso l'aspetto di una linea doppia e spessa. La proprietà border-collapse permette di scegliere tra questo classico aspetto a foglio di calcolo e una griglia più pulita con linee singole.

separate (valore predefinito) — ogni cella mantiene i propri bordi. La distanza tra i bordi delle celle adiacenti è controllata dalla proprietà border-spacing.
collapse — i bordi adiacenti si fondono in uno solo. Il browser sceglie il bordo "vincente" per ogni lato condiviso in base a larghezza, stile e colore, e border-spacing viene ignorato.

Questa proprietà influisce solo sugli elementi <table> e display: inline-table, ed è uno dei pochi casi in cui i bordi impostati su un <table>, le sue righe e le sue celle interagiscono tra loro.

Valore iniziale	separate
Si applica a	Elementi table e inline-table.
Ereditata	No.
Animabile	No.
Versione	CSS2
Sintassi DOM	object.style.borderCollapse = "collapse";

Sintassi

Sintassi della proprietà CSS border-collapse

border-collapse: separate | collapse | initial | inherit | unset;

Esempio della proprietà border-collapse:

Esempio della proprietà CSS border-collapse con il valore collapse

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      table {
        border-collapse: collapse;
      }
      table,
      th,
      td {
        border: 1px solid #cccccc;
      }
      thead {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th {
        height: 50px;
        text-align: center;
      }
      td {
        padding: 3px 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-collapse property example</h2>
    <p>Here the "collapse" value is set for the border-collapse property.</p>
    <table>
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Provalo tu stesso »

Risultato

Nell'esempio seguente è possibile vedere il contrasto direttamente. Quando si usa border-collapse: separate, la proprietà border-spacing definisce lo spazio tra le celle. Quando si usa border-collapse: collapse, border-spacing non ha effetto — le celle si toccano e i loro bordi si fondono.

Esempio della proprietà border-collapse con i valori "separate" e "collapse":

Esempio della proprietà CSS border-collapse con il valore separate

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      table,
      td,
      th {
        border: 1px solid #ccc;
      }
      thead {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th {
        height: 30px;
        text-align: center;
      }
      td {
        padding: 3px 10px;
      }
      #table1 {
        border-collapse: separate;
        border-spacing: 10px;
      }
      #table2 {
        border-collapse: collapse;
        border-spacing: 10px; /* ignored when border-collapse is collapse */
      }
    </style>
  </head>
  <body>
    <h1>Border-collapse property example</h1>
    <h2>border-collapse: separate;</h2>
    <p>When using the "border-collapse: separate", the border-spacing property can be used to define the space between the cells.</p>
    <table id="table1">
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
    <h2>border-collapse: collapse;</h2>
    <p>When using the "border-collapse: collapse", the border-spacing property has no effect.</p>
    <table id="table2">
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Provalo tu stesso »

Valori

Valore	Descrizione
separate	Ogni cella ha i propri bordi. Questo è il valore predefinito. La proprietà border-spacing controlla la distanza tra le celle.
collapse	Le celle condividono i bordi. I bordi adiacenti si fondono in un unico bordo.
initial	Imposta la proprietà al suo valore predefinito.
inherit	Eredita la proprietà dall'elemento padre.
unset	Reimposta la proprietà al suo valore iniziale.

Come funziona il modello di collasso

Quando è impostato border-collapse: collapse, ogni lato condiviso può disegnare solo un bordo, quindi il browser deve risolvere i conflitti tra i bordi dichiarati sulla tabella, sulla riga e sulle due celle adiacenti. Le regole, in ordine, sono:

Un bordo con border-style: hidden vince sempre e rimuove completamente il lato.
Un bordo più largo batte uno più stretto.
Se le larghezze sono uguali, gli stili sono classificati in ordine: double > solid > dashed > dotted > ridge > outset > groove > inset.
Se larghezza e stile sono ancora in parità, vince il bordo dell'elemento più vicino alla cella (cella > riga > tabella).

Ecco perché, in modalità collasso, impostare larghezze di bordo diverse su <td> e <table> potrebbe non dare l'effetto atteso — viene disegnato solo il bordo vincente.

Quando utilizzarla

Usa collapse per la maggior parte delle tabelle di dati. Produce la griglia pulita a linea singola che ci si aspetta dai fogli di calcolo ed è il modo più semplice per evitare bordi doppi.
Mantieni separate quando vuoi uno spazio visibile tra le celle (imposta border-spacing), angoli arrotondati sulle celle, o bordi per cella che non si fondono.
Tieni presente che border-radius sulle celle ha un effetto visibile solo in modalità separate; i bordi collassati non possono essere arrotondati.

Esercitazione

Pratica

Cosa fa la proprietà 'border-collapse' di CSS?

Definisce lo spazio tra le celle di una tabella.Permette di decidere se i bordi della tabella devono collassare in un unico bordo o essere visualizzati come bordi separati.Regola le dimensioni della tabella.Viene utilizzata per specificare il colore dei bordi della tabella.Determina lo stile per i quattro bordi di una cella della tabella.

Risorse correlate

Proprietà CSS border-spacing — imposta lo spazio tra le celle quando si usa border-collapse: separate.
Proprietà CSS empty-cells — mostra o nasconde i bordi sulle celle vuote (si applica solo in modalità separate).
Proprietà CSS table-layout — controlla come il browser dimensiona le colonne della tabella.
Proprietà CSS border — la proprietà abbreviata per larghezza, stile e colore del bordo di un elemento.