Runtuh sempadan - Trik CSS

Anonim

Tempat border-collapsepenginapan ini boleh digunakan

display: table display: inline-table
  • separate (lalai) - di mana semua sel jadual mempunyai sempadan bebas mereka sendiri dan mungkin ada ruang antara sel-sel itu juga.
  • collapse - di mana ruang dan sempadan antara sel jadual runtuh sehingga hanya ada satu sempadan dan tidak ada ruang antara sel.

Apabila border-collapseadalah collapse, ia adalah ketara bahawa sifat-sifat seperti border-spacingdan border-radius(di sempadan sebenar) tidak melakukan apa-apa. Anda akan memerlukan border-collapse: separate;sekiranya anda memerlukan salah satu daripada perkara tersebut.

Inilah contoh di mana anda boleh menukar antara keduanya:

Lihat
Jadual Pen dengan Sel Bulat oleh Chris Coyier (@chriscoyier)
di CodePen.

Sokongan Penyemak Imbas

elemen (atau elemen yang dibuat untuk berkelakuan seperti jadual melalui atau). Terdapat dua nilai:
Chrome Safari Firefox Opera IE Android iOS
Berfungsi Berfungsi Berfungsi Berfungsi Berfungsi Berfungsi Berfungsi