Question

以下代码，在所有浏览器中 - 除了谷歌Chrome最新的PC - 在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;
         }
     }

Answer 1

尝试在 thead 之后加上 tbody 。

<强> 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元素。

Answer 2

移除border-collapse: collapse并使用border-top TD和border-bottom TABLE。

Live demo

Answer 3

试试这个。

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

Answer 4

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

表格单元格在Google Chrome PC中失去边界

4 个答案: