Menghapus batas sel tabel yang tidak diinginkan dengan CSS

89

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.

html css html-table

— Bob
sumber

2

Terima kasih kepada semua orang yang menyarankan untuk menambahkan border-collapse: collapse ke CSS. Itu berhasil.

— Bob

211

Anda perlu menambahkan ini ke CSS Anda:

table { border-collapse:collapse }

— Doug Neiner
sumber

13

Perhatikan bahwa ini harus diterapkan pada tabel , bukan pada td . Saya baru saja membuat kesalahan ini dan menghabiskan lebih dari setengah jam mencoba mencari tahu mengapa itu tidak berhasil.

— javawizard

16

tambahkan beberapa css:

td, th {
   border:none;
}

— Dave Markle
sumber

1

tidak berfungsi untuk saya di chrome 60.0.3112.113 saat diterapkan ke tabel

— Abdullah Gheith

15

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;
}

— Gabriel McAdams
sumber

12

untuk menghapus border, cukup gunakan css seperti ini:

td {
 border-style : hidden!important;
}

— Amine_Dev
sumber

8

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.

— SLaks
sumber

1

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

— falc0n
sumber

1

Cellpadding adalah ruang antara konten tabel dan batasannya td{padding:X}. Penspasian sel adalah spasi di antara setiap bourdries sel ("margin" antar batas sel). Anda dapat menyetel border-collapseuntuk meniru apa yang dilakukan cellspacingatribut pada tag tabel, tetapi itu tidak selalu mudah.

— MetalFrog

1

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;
}

— Jessica Escobar
sumber

0

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

— Josh Anderson
sumber

3

@Josh bukan border: none?

— Doug Neiner

@DougNeiner Posting lama, tetapi tidak ada dan 0 keduanya sama-sama valid. Saya suka 0 karena saya harus mengetik lebih sedikit :)

— Scott Simontis

-1

terkadang bahkan setelah menyelesaikan borders.

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

— bresleveloper
sumber