Saya punya sedikit masalah dengan Microsoft Edge:
Ini tentang prioritas rendering batas tabel ketika border-collapse: collapse; disetel. Saya telah membaca tentang prioritas-prioritas tersebut bahwa ada aturan-aturan, yang perbatasannya diberikan dengan prioritas yang lebih tinggi: Dari yang kurang penting ke yang lebih penting: tabel, tbody, tr, td... juga gaya perbatasan itu sendiri: double over single dan seterusnya.
Perilaku normal untuk tabel dengan batas yang diciutkan dan batas dalam dengan warna berbeda adalah, batas dalam 'bercampur' dengan batas luar: https://jsfiddle.net/fpyf1kL7/3/ (ini berlaku untuk Chrome, FF, dan Edge).
Jadi untuk tidak membiarkan batas dalam 'berdarah' ke luar, saya menemukan perbaikan cepat dengan mengatur gaya batas tabel itu sendiri menjadi 'ganda' sambil tetap memiliki lebar 1 piksel (sehingga tampak 'padat): https://jsfiddle.net/fpyf1kL7/4/ , tetapi itu hanya berfungsi di Chrome dan FF. Di Microsoft Edge, batas dalam masih 'berdarah' ke batas luar.
Saya sudah menemukan solusi untuk masalah itu dengan menggunakan border-collapse: separate; dan border-spacing: 0;: https://jsfiddle.net/fpyf1kL7/2/ . Ini berfungsi di Chrome, FF dan Edge. Tapi sekarang perbatasannya sudah tidak diciutkan lagi, jadi saya tidak bisa lagi memiliki perbatasan pada elemen tbody atau tr dan saya harus berhati-hati untuk tidak memiliki perbatasan yang berdekatan.
Jadi pertanyaan sebenarnya di sini adalah:
- Mengapa Microsoft Edge menangani masalah rendering perbatasan yang runtuh secara berbeda?
- Apakah ada cara untuk membuatnya berfungsi dengan benar (tidak 'berdarah') di Microsoft Edge dengan batas yang diciutkan?
