Google Chrome PC 中的表格单元格失去边框答案

【问题标题】：Table Cells lose border in Google Chrome PCGoogle Chrome PC 中的表格单元格失去边框
【发布时间】：2013-03-19 06:35:21
【问题描述】：

以下代码在所有浏览器中 - 除了 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;
         }
     }

【问题讨论】：

w3schools.com/tags/tag_thead.asp 请看定义和用法，tbody后面放thead无效。（标签必须在以下上下文中使用：作为元素的子元素，在任何元素之后，以及任何、和元素）

当thead th或tbody td足够好时，是否真的需要指定thead tr th或tbody tr td？不要让你的选择器变得比需要的更长。

和

标签： html css google-chrome

【解决方案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 元素之前。

【讨论】：

嗯。谢谢。应该已经发现了。 thead 是由服务器端代码生成/调整的，因此它的位置很奇怪。

【解决方案2】：

删除border-collapse: collapse 并使用border-top 表示TD 和border-bottom 表示TABLE。

Live demo

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案4】：

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

【讨论】：