Proprietatea border-collapse

Proprietatea border-collapse face ca marginile duble dintre celulele td sau celulele th ale tabelului HTML (și între marginea celulei și cea a tabelului însuși) să se colapseze și să arate ca una singură.

Această proprietate se aplică numai tabelelor și elementelor cu display setat la valoarea table sau inline-table. Pentru elementele bloc normale, din păcate, nu va funcționa. Rețineți că trebuie aplicat tabelului, nu celulelor sale.

Sintaxă

cssselector {
  border-collapse: collapse | separate;
}

Valori

Valoare	Descriere
`collapse`	Marginile duble vor arăta ca una singură. Există efecte secundare: proprietatea `border-spacing` și atributul `cellspacing` nu vor mai funcționa.
`separate`	Fiecare celulă a tabelului va avea propria sa margine (de aceea în unele locuri marginile vor fi duble, dacă spațiul dintre celule este zero).

Valoarea implicită: separate.

Exemplu . Valoarea separate

Acum în tabel toate marginile sunt duble (marginea este setată atât celulelor, cât și tabelului însuși):

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

Результат:

Exemplu . Valoarea separate

Acum marginea este setată celulelor, dar tabelului însuși nu este setată. Acolo unde două celule au o margine comună, marginile vor fi duble, în restul locurilor - simple:

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

Результат:

Exemplu . Valoarea collapse

Acum în tabel toate marginile se vor colapsa și vor arăta cu grosimea de 1px, așa cum ne-am dori:

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

Результат: