CSS 选项将边框应用于 tfoot？使用“border-top”设计足部样式不起作用

Question

当我将 CSS 边框属性应用于 tfoot 时，边框不会呈现（border-top、border-bottom、border 等，没有渲染边框）

有哪些选项可以仅在 tfoot 或 tbody 上渲染边框？是否支持将边框应用于 tbody 或 tfoot？

下面的 CSS+HTML 示例，在 Chrome 18、Firefox 9 或 IE9 中不渲染边框。

<style>
table.sample tfoot
{
 border-top: 2px solid black;
}
</style>
<table class="sample">
<thead>
 <tr>
  <td>Date</td><td>DataX</td><td>DataY</td><td>DataZ</td>
 </tr>
</thead>
<tfoot>
 <tr>
  <td colspan="3">Average:</td><td>100</td>
 </tr>
</tfoot>
<tbody>
 <tr>
  <td>Feb1</td><td>22</td><td>333</td><td>44</td>
 </tr>
 <tr>
  <td>Feb2</td><td>66</td><td>77</td><td>88</td>
 </tr>
</tbody>
</table>

Answer 1

根据需要添加

table {
 border-collapse: collapse;
}

和调整单元格内的填充（以补偿单元格之间默认间距的损失）。

（在 jsfiddle 中，normalize.css 包含此设置。jsfiddle 并不总是对应于单独测试代码时发生的情况的原因之一。）

Answer 2

您可以将边框应用于 tfoot 和 tbody。

请参阅以下小提琴作为证明！

http://jsfiddle.net/KHx24/

尝试

<style type="text/css">
    table.sample tfoot
    {
       border-top: 2px solid black;
    }
</style>