html - Firefox 中的表格标题边框错误

Question

我想知道，如果这是一个错误。正如您在jsfiddle上看到的那样，所有单元格周围只有顶部边框而不是边框​​。请注意，IE 9 会按预期绘制边框。另请注意，如果您移动 中的内容<tfooter>，<tbody>Firefox 会开始像 IE 一样绘制边框。

HTML

<table>
<thead>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
</thead>
<tfoot>
    <tr>
        <td colspan="3">
            <span class="norecords">No records found.</span>
        </td>
    </tr>   
</tfoot>
<tbody></tbody>

CSS

table {
    background-color: #EFEFEF;
    border: 1px solid #BCBCBC;
    border-collapse: collapse;
} 
th, td {
    padding: 10px;
}
th {
    border: 1px solid #BCBCBC;
}

Answer 1

您的问题是tbody- 如果您删除此空标签（或向其添加一行），它将起作用：

http://jsfiddle.net/FyARs/3/

Answer 2

这适用于所有人

<table border=0 cellspacing=0 cellpadding=0>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="3">
                <span class="norecords">No records found.</span>
            </td>
        </tr>   
    </tfoot>
    <tbody></tbody>
</table>

CSS

table {
    background-color: #EFEFEF;
    border: 1px solid #BCBCBC;
}
th, td {
    padding: 10px;
}
th {
    border: 1px solid #BCBCBC;
}

Answer 3

这是因为浏览器处理折叠边框的方式不同。

在firefox中，一个空的tbody没有tr在里面，它会被当作无边框，无边框的边缘会超过近行的边缘。

只需在您的情况下删除未使用tbody的，或至少放入一对<tr></tr>。