使用 CSS 删除不需要的表单元格边框

我有一个奇怪而令人沮丧的问题:

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

我对 头、 Tr和 Tr奇数元素应用不同的背景色值。问题是，在大多数浏览器中，每个单元格都有一个不需要的边框，这个边框不是任何表行的颜色。只有在 Firefox 3.5中，表在任何单元格中都没有边框。

我只是想知道如何在其他主要浏览器中移除这些边框，这样你在表格中看到的就只是交替的行颜色。

363140 次浏览
小开

Modify your HTML like this:

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

(I added border="0" cellpadding="0" cellspacing="0")

In CSS, you could do the following:

table {
border-collapse: collapse;
}
小开
最佳答案

You need to add this to your CSS:

table { border-collapse:collapse }
小开

Try assigning the style of border: 0px; border-collapse: collapse; to the table element.

小开

Set the cellspacing attribute of the table to 0.

You can also use the CSS style, border-spacing: 0, but only if you don't need to support older versions of IE.

小开

You may also want to add

table td { border:0; }

the above is equivalent to setting cellpadding="0"

it gets rid of the padding automatically added to cells by browsers which may depend on doctype and/or any CSS used to reset default browser styles

小开

After trying the above suggestions, the only thing that worked for me was changing the border attribute to "0" in the following sections of a child theme's style.css (do a "Find" operation to locate each one -- the following are just snippets):

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


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

Thus looking like this afterwards:

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


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

sometimes even after clearing borders.

the reason is that you have images inside the td, giving the images display:block solves it.

小开

to remove the border , juste using css like this : 

td {
border-style : hidden!important;
}

提交答案