Saya telah merangkum cara menggunakan CSS untuk mencapai cahaya perbatasan dan efek gelap dari tabel Border + bordercolordark + BorderColorlight. Kemudian seorang netizen bertanya kepada saya mengapa dia menulis gaya CSS yang serupa, tetapi dia hanya bisa melihat efek perbatasan tabel yang biasanya di bawah opera, dan tidak ada yang di bawah IE.
Saya turun dari Opera9 dan melihat bahwa memang itu masalahnya. Alasannya tidak rumit: karena di bawah IE (Firefox tampaknya konsisten dengan IE), jika konten TD kosong, bahkan jika Anda mengatur tinggi dan lebar, gaya perbatasan sel ini tidak akan ditampilkan; Opera akan menggunakan gaya untuk merender terlepas dari apakah ada konten atau tidak. Pertanyaan ini ditemui ketika saya lulus. Kepala departemen datang untuk bertanya kepada saya pada waktu itu, dan kemudian saya mengatakan kepadanya: Tambahkan saja ke setiap TD kosong. Setiap kali saya mengalami masalah ini di masa depan, saya akan menggunakan metode sederhana, kasar dan efektif ini untuk menyelesaikannya.
Tetapi hari ini saya mencoba yang terbaik untuk mempelajarinya beberapa kali, dan dari Jiarry, saya tahu bahwa sintaks CSS memungkinkan kami untuk mengubah perilaku default ini: menggunakan border-collapse: runtuh; dan sel kosong: tunjukkan; untuk membuat perbatasan yang menghilang muncul.
class = test1: tambahkan perbatasan-collapse: runtuh;
.test1 {
Perbatasan: 1px Solid #999999;
Border-Collapse: runtuh;
Lebar: 60%
}
.test1 td {
Border-Bottom: 1px Solid #999999;
Tinggi: 28px;
Padding-kiri: 6px;
}
Kelas1 Ada konten di sini
Ada konten di sini
class = test2: tambahkan perbatasan-collapse: runtuh; dan sel kosong: tunjukkan;
.test2 {
Perbatasan: 1px solid black;
Border-Collapse: runtuh;
Lebar: 60%
}
.test2 td {
Border-Bottom: 1px solid black;
Tinggi: 28px;
Padding-kiri: 6px;
sel kosong: tunjukkan;
}
Class2 memiliki konten di sini
Ada konten di sini
class = test3: tanpa border-collapse: runtuh; dan sel kosong: tunjukkan;
.test3 {
Perbatasan: 1px Solid #999999;
Lebar: 60%
}
.test3 td {
Border-Bottom: 1px Solid #999999;
Tinggi: 28px;
Padding-kiri: 6px;
}
Class3 memiliki konten di sini
Ada konten di sini