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>。

Firefox中的表标题边框错误

3 个答案: