html - 将边框应用于 tfoot 的 CSS 选项？使用 "border-top"设计 tfoot 不起作用

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 并不总是对应于单独测试代码时发生的情况的原因之一。)