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


86

我有一个特殊而令人沮丧的问题。对于简单的标记:

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

我将不同的背景颜色值应用于theadtrtr奇数元素。问题在于,在大多数浏览器中,每个单元格都有一个不需要的边框,这不是任何表行的颜色。仅在Firefox 3.5中,表格的任何单元格都没有边框。

我只想知道如何在其他主要浏览器中删除这些边框,以便表中唯一可见的是交替的行颜色。


2
感谢所有建议在CSS中添加border-collapse:collapse的人。做到了。
鲍勃

Answers:


210

您需要将此添加到CSS:

table { border-collapse:collapse }

13
注意,这必须应用于,而不是td。我只是犯了这个错误,花了半个多小时试图弄清楚为什么它不起作用。
javawizard 2014年


15

像这样修改HTML:

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

(我添加了 border="0" cellpadding="0" cellspacing="0"

在CSS中,您可以执行以下操作:

table {
    border-collapse: collapse;
}

12

要删除边框,请使用css这样的juste:

td {
 border-style : hidden!important;
}

8

cellspacing表的属性设置为0

您也可以使用CSS样式,border-spacing: 0但仅在不需要支持IE的较早版本时才可以。


1

您可能还想添加

table td { border:0; }

以上等同于设置cellpadding =“ 0”

它摆脱了浏览器自动添加到单元格的填充,后者可能取决于doctype和/或用于重置默认浏览器样式的任何CSS


1
Cellpadding是表格内容与其边界之间的空间td{padding:X}。单元间距是每个单元边界之间的空间(单元边界之间的“边距”)。您可以设置border-collapse为模仿该cellspacing属性对table标记的作用,但这并不是万无一失的。
MetalFrog 2012年

1

在尝试了上述建议之后,唯一对我有用的方法是在子主题的style.css的以下部分中将border属性更改为“ 0”。片段):

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

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

因此,如下所示:

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

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


-1

有时甚至在清算后borders。

原因是您在中有图片td,提供图片即可display:block解决该问题。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.