5

以下代码在所有浏览器中 -除了 PC 上的 Google Chrome 最新版- 在 tbody 表格单元格上显示边框，如 CSS 中指定的那样。

Chrome PC，显示 thead 边框，但不显示 TD 边框。为什么？它是 Chrome 中的错误，还是我的 HTML/CSS 中的错误？

这是一个复制它的jsFiddle：

<table width="505" cellspacing="0" cellpadding="0" border="0">
<tbody>
    <tr>
        <td>Testing</td>
        <td>123</td>
    </tr>
    <tr>
        <td>Testing</td>
        <td>456</td>
    </tr>
</tbody>
<thead>
    <tr>
        <th>foo</th>
        <th>bar</th>
    </tr>
</thead>


table {
width:736px;
border-collapse: collapse;
thead {
    border-top: 2px solid #aaaaaa;
    tr {
        th {
            border: 0;
            padding: 12px 5px;
        }
    }
}
tbody {
    border-top:0;
     tr {
         td {
            padding: 10px 5px;
            border-top: 1px solid #aaaaaa;
            border-bottom: 1px solid #aaaaaa;
         }
     }
4

4 回答 4

6

尝试将tbody放在thead之后。

HTML

<table width="505" cellspacing="0" cellpadding="0" border="0">
    <thead>
        <tr>
            <th>foo</th>
            <th>bar</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Testing</td>
            <td>123</td>
        </tr>
        <tr>
            <td>Testing</td>
            <td>456</td>
        </tr>
    </tbody>
</table>

JSFiddle

来自MDN：

thead - 一个表格元素。thead 必须出现在任何标题或 colgroup 元素之后，即使是隐式定义的，但在任何 tbody、tfoot 和 tr 元素之前。

于 2013-03-28T17:33:40.513 回答
1

删除border-collapse: collapse并使用border-topforTD和border-bottomfor TABLE。

现场演示

于 2013-03-28T17:42:30.390 回答
0

试试这个。

table {
    width:736px;
    border-collapse: collapse;
}
thead {
    border-top: 2px solid #aaaaaa;
}
th {
    border: 0;
    padding: 12px 5px;
}
tbody {
    border-top:0;
}         
td {
    padding: 10px 5px;
    border-top: 1px solid #aaaaaa;
    border-bottom: 1px solid #aaaaaa;
}
于 2013-03-28T17:36:34.957 回答
0

我有一个使用 的表格-webkit-backface-visibility:hidden;，它隐藏了边框颜色，所以要修复我使用了-webkit-backface-visibility:visible;.

于 2015-03-24T17:06:56.160 回答