Menghapus batas sel tabel yang tidak diinginkan dengan CSS

Saya memiliki masalah yang aneh dan membuat frustrasi. Untuk markup sederhana:

<table>
    <thead>
        <tr><th>1</th><th>2</th><th>3</th></tr>
     </thead>
    <tbody>
        <tr><td>a</td><td>b></td><td>c</td></tr>
        <tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
    </tbody>
</table>

Saya menerapkan nilai warna latar belakang yang berbeda ke elemen ganjil thead , tr , dan tr . Masalahnya adalah di sebagian besar browser, setiap sel memiliki batas yang tidak diinginkan yang bukan warna baris tabel mana pun. Hanya di Firefox 3.5 tabel tidak memiliki batas di sel mana pun.

Saya hanya ingin tahu cara menghapus batas ini di browser utama lainnya sehingga satu-satunya hal yang Anda lihat di tabel adalah warna baris bergantian.

Anda perlu menambahkan ini ke CSS Anda:

table { border-collapse:collapse }

tambahkan beberapa css:

td, th {
   border:none;
}

Ubah HTML Anda seperti ini:

<table border="0" cellpadding="0" cellspacing="0">
    <thead>
        <tr><td>1</td><td>2</td><td>3</td></tr>
     </thead>
    <tbody>
        <tr><td>a</td><td>b></td><td>c</td></tr>
        <tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
    </tbody>
</table>

(Saya menambahkan border="0" cellpadding="0" cellspacing="0")

Di CSS, Anda dapat melakukan hal berikut:

table {
    border-collapse: collapse;
}

untuk menghapus border, cukup gunakan css seperti ini:

td {
 border-style : hidden!important;
}

Setel cellspacingatribut tabel ke 0.

Anda juga dapat menggunakan gaya CSS border-spacing: 0, tetapi hanya jika Anda tidak perlu mendukung versi IE yang lebih lama.

Anda mungkin juga ingin menambahkan

table td { border:0; }

di atas sama dengan menyetel cellpadding = "0"

itu menghilangkan padding yang secara otomatis ditambahkan ke sel oleh browser yang mungkin bergantung pada doctype dan / atau CSS apa pun yang digunakan untuk mengatur ulang gaya browser default

Setelah mencoba saran di atas, satu-satunya hal yang berhasil untuk saya adalah mengubah atribut border ke "0" di bagian berikut dari style.css tema anak (lakukan operasi "Temukan" untuk menemukan masing-masing - berikut ini hanya cuplikan):

.comment-content table {
    border-bottom: 1px solid #ddd;

.comment-content td {
    border-top: 1px solid #ddd;
    padding: 6px 10px 6px 0;
}

Jadi terlihat seperti ini setelahnya:

.comment-content table {
    border-bottom: 0;

.comment-content td {
    border-top: 0;
    padding: 6px 10px 6px 0;
}

Coba tetapkan gaya border: 0px; border-collapse: collapse;ke elemen tabel.

terkadang bahkan setelah menyelesaikan borders.

alasannya adalah bahwa Anda memiliki gambar di dalam td, memberikan gambar display:blockmenyelesaikannya.