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

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

我只想知道如何在其他主stream浏览器中删除这些边框,以便在表格中看到的只是交替的行颜色。

你需要添加到你的CSS:

 table { border-collapse:collapse } 

像这样修改你的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; } 

添加一些CSS:

 td, th { border:none; } 

将表格的cellspacing属性设置为0

您也可以使用CSS样式border-spacing: 0 ,但仅限于您不需要支持旧版本的IE。

您可能还想添加

 table td { border:0; } 

以上相当于设置cellpadding =“0”

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

在尝试了上述build议之后,唯一对我有效的方法是在子主题的style.css的以下部分中将边框属性更改为“0”(执行“查找”操作以find每一个 – 以下仅是摘录):

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

删除边框,使用像这样的CSS:

 td { border-style : hidden!important; } 

尝试分配border: 0px; border-collapse: collapse;的样式border: 0px; border-collapse: collapse; border: 0px; border-collapse: collapse; 到表元素。

有时甚至在清除border之后。

原因是你有td内的图像,给图像display:block解决它。

 <td style=" border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;"> 

如果你想要,你可以这样的事情

 $style = ' style=" border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;"'; <td $style>bla bla</td><td $style>bla bla</td><td $style>bla bla</td><td $style>bla bla</td>