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

Question

所有浏览器中的以下代码 - 除了谷歌Chrome上的最新版本 - 在CSS体表单元格上显示边框,如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

尝试将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元素之前.