`border-collapse, border-spacing și table-layout` în CSS

Controlează chenarele unui tabel (unite sau separate) și modul în care browserul calculează lățimea coloanelor.

Sintaxă CSS

table {
  border-collapse: collapse;   /* sau separate (implicit) */
  border-spacing: 4px;         /* doar cu separate */
  table-layout: fixed;         /* sau auto (implicit) */
  width: 100%;
}

Ce face `border-collapse, border-spacing și table-layout`

Implicit (border-collapse: separate), fiecare celulă are chenarul ei, iar între celule rămâne un mic spațiu, reglabil cu border-spacing. Rezultatul arată ca niște linii dublate. Cu collapse, chenarele celulelor vecine se unesc într-o singură linie, aspectul obișnuit al tabelelor de date.

table-layout: auto (implicit) citește tot conținutul tabelului ca să decidă lățimea coloanelor, deci un text lung lărgește o coloană. Cu table-layout: fixed, lățimile vin din primul rând (sau din <col>) și din lățimea tabelului, iar restul conținutului nu le mai schimbă. Tabelul se desenează mai repede și coloanele rămân stabile.

Valori uzuale

Valoare	Descriere
`border-collapse: separate`	Implicit: fiecare celulă are chenarul ei, cu spațiu între celule.
`border-collapse: collapse`	Chenarele vecine se unesc într-o singură linie.
`border-spacing`	Distanța dintre celule (una sau două valori: orizontal, vertical); funcționează doar cu separate.
`table-layout: auto`	Implicit: lățimea coloanelor depinde de conținut.
`table-layout: fixed`	Lățimea coloanelor vine din primul rând și din lățimea tabelului.

Exemple

Exemplul 1: Tabel de note cu linii simple

collapse face ca între celule să existe o singură linie de 1px, nu două.

.catalog {
  border-collapse: collapse;
  width: 100%;
}
.catalog th,
.catalog td {
  border: 1px solid #cbd5e1;
  padding: 8px 12px;
}
.catalog th {
  background: #f1f5f9;
  text-align: left;
}

Efect vizual în browser

Tabelul cu elevii (Ana – 9,50; Mihai – 8,75) are linii gri subțiri, unice, între toate celulele, iar antetul are fundal gri-deschis.

Exemplul 2: Coloane cu lățime fixă, indiferent de conținut

Cu table-layout: fixed, o descriere foarte lungă nu mai împinge coloana de preț.

.produse {
  table-layout: fixed;
  width: 100%;
}
.produse th:nth-child(1) { width: 60%; }
.produse th:nth-child(2) { width: 20%; }
.produse td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}