Loại bỏ các đường viền ô bảng không mong muốn bằng CSS

Tôi có một vấn đề đặc biệt và khó chịu. Đối với đánh dấu đơn giản:

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

Tôi áp dụng giá trị background-color khác nhau để các thead , tr và tr yếu tố lẻ. Vấn đề là trong hầu hết các trình duyệt, mọi ô đều có đường viền không mong muốn không phải là màu của bất kỳ hàng nào trong bảng. Chỉ trong Firefox 3.5, bảng không có đường viền trong bất kỳ ô nào.

Tôi chỉ muốn biết cách xóa các đường viền này trong các trình duyệt chính khác để thứ duy nhất bạn thấy trong bảng là các màu hàng xen kẽ.

Bạn cần thêm cái này vào CSS của mình:

table { border-collapse:collapse }

thêm một số css:

td, th {
   border:none;
}

Sửa đổi HTML của bạn như thế này:

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

(Tôi đã thêm border="0" cellpadding="0" cellspacing="0")

Trong CSS, bạn có thể làm như sau:

table {
    border-collapse: collapse;
}

để xóa đường viền, hãy căn lề bằng cách sử dụng css như thế này:

td {
 border-style : hidden!important;
}

Đặt cellspacingthuộc tính của bảng thành 0.

Bạn cũng có thể sử dụng kiểu CSS border-spacing: 0, nhưng chỉ khi bạn không cần hỗ trợ các phiên bản IE cũ hơn.

Bạn cũng có thể muốn thêm

table td { border:0; }

ở trên tương đương với thiết lập cellpadding = "0"

nó loại bỏ phần đệm được trình duyệt tự động thêm vào các ô có thể phụ thuộc vào loại tài liệu và / hoặc bất kỳ CSS nào được sử dụng để đặt lại kiểu trình duyệt mặc định

Sau khi thử các đề xuất ở trên, điều duy nhất phù hợp với tôi là thay đổi thuộc tính border thành "0" trong các phần sau của style.css của chủ đề con (thực hiện thao tác "Tìm" để xác định từng thuộc tính - sau đây chỉ là đoạn trích):

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

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

Như vậy sau đó trông như thế này:

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

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

Thử gán kiểu border: 0px; border-collapse: collapse;cho phần tử bảng.

đôi khi ngay cả sau khi xóa borders.

lý do là bạn có hình ảnh bên trong td, đưa ra hình ảnh display:blockgiải quyết nó.