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

Question

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

<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奇数元素.问题是在大多数浏览器中,每个单元格都有一个不需要的边框,这不是任何表格行的颜色.仅在Firefox 3.5中,表格在任何单元格中都没有边框.

我只想知道如何在其他主流浏览器中删除这些边框,以便您在表中看到的唯一内容是交替的行颜色.

Answer 1

你需要将它添加到你的CSS:

table { border-collapse:collapse }

Answer 2

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

Answer 3

添加一些CSS:

td, th {
   border:none;
}

Answer 4

将cellspacing表的属性设置为0.

您也可以使用CSS样式,border-spacing: 0但前提是您不需要支持旧版本的IE.

Answer 5

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

td {
 border-style : hidden!important;
}