使用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>
我将不同的背景颜色值应用到thead , tr和tr 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>