Border Collapse

Memberi border pada sel tabel punya jebakan yang tidak ada di elemen lain: sel-sel berdempetan masing-masing punya garis sendiri, sehingga dua garis tampil berdempetan di setiap pertemuan sel. Property border-collapse menentukan bagaimana browser menangani keadaan itu — membiarkan garis berdiri sendiri (separate) atau menyatukannya (collapse). Chapter ini membedah kedua mode, property border-spacing yang hanya berlaku pada mode pertama, dan pertimbangan memilih salah satunya.

Dua Model Garis Tabel #

Aspek	`separate` (default)	`collapse`
Kepemilikan garis	setiap sel menggambar border-nya sendiri	garis antarsel digambar satu kali, dipakai bersama
Pertemuan dua sel	dua garis bertumpuk	satu garis
Jarak antarsel	diatur `border-spacing`	tidak ada — sel menempel
Analogi	sel-sel tersusun seperti ubin berjarak	grid garis tunggal

Pada mode separate, tabel sebenarnya tersusun seperti deretan kotak kecil berjarak — itulah sebabnya garis sel yang bersebelahan terlihat ganda. Pada mode collapse, browser memutuskan garis mana yang menang setiap kali dua sel bersaing: border yang lebih lebar menang, dan bila sama lebar, style mengikuti urutan prioritas spesifikasi. Untuk styling sehari-hari, cukup pahami bahwa hasilnya satu garis rapi — detail penentuannya jarang perlu disengaja.

css
.tabel-stok {
  border-collapse: collapse;
}

.tabel-stok th,
.tabel-stok td {
  border: 1px solid #cbd5d1;
  padding: 8px 12px;
}

Kedua tabel memakai markup dan gaya border sel yang sama persis; yang membedakan hanya border-collapse-nya:

border-spacing: Jarak Antar Sel #

Mode separate membuka satu property khusus yang tidak bekerja pada collapse: border-spacing, pengatur jarak antarsel:

css
.tabel-kalender {
  border-collapse: separate;
  border-spacing: 4px;
}

Gaya sel-terpisah seperti ini umum untuk kalender, peta tempat duduk, atau deretan kartu kecil dalam bentuk tabel.

Nilainya bisa satu (jarak sama ke segala arah) atau dua (border-spacing: 6px 2px berarti 6px horizontal, 2px vertikal). Untuk membuat mode separate tanpa jarak sama sekali, set border-spacing: 0 — garisnya tetap ganda di pertemuan sel, tetapi sel-selnya menempel.

Resep Garis Baris yang Aman di Kedua Mode #

Kebutuhan paling umum pada tabel data bukan grid penuh, melainkan garis pemisah baris. Resepnya sama di kedua mode:

css
.tabel-stok td {
  border-bottom: 1px solid #e5e7eb;
  padding: 9px 12px;
}

Karena garis hanya digambar di bawah setiap sel, tidak ada pertemuan garis yang bertumpuk — hasilnya identik pada separate maupun collapse. Perhatikan juga baris terakhir: bila garis bawah baris penutup tidak diinginkan, gabungkan dengan :last-child dari section Pseudo-classes dan Pseudo-elements:

css
.tabel-stok tbody tr:last-child td {
  border-bottom: none;
}

Mana yang Dipilih #

Kebutuhan	Pilihan	Alasan
Tabel data standar (laporan, harga, log)	`collapse`	satu garis, tampilan paling umum dan bersih
Kalender, peta kursi, kotak-kotak kecil	`separate` + `border-spacing`	sel butuh terlihat sebagai unit terpisah
Tabel dengan sel ber-radius bulat	`separate`	radius tiap sel tidak terpotong garis tetangga
Header sticky pada tabel menggulir	`collapse` atau `separate`	keduanya bisa; lihat catatan chapter Table Header dan Row

Dalam praktiknya, collapse adalah pilihan bawaan mayoritas desain tabel data — termasuk resep pada chapter Styling Table — sedangkan separate dipilih ketika sel benar-benar ingin tampil sebagai kotak mandiri.

Ringkasan #

border-collapse: separate membiarkan setiap sel menggambar garisnya sendiri dengan jarak yang diatur border-spacing; collapse menyatukan garis pertemuan menjadi satu dan menjadi pilihan standar tabel data. Resep garis baris (border-bottom pada sel) aman dipakai di kedua mode. Pertanyaan berikutnya bukan lagi garis, melainkan struktur: bagaimana thead, tbody, dan baris tabel digaya — termasuk membuat header yang menempel saat tabel menggulir.