Question

A border does not render when I apply a CSS border property to tfoot (border-top, border-bottom, border, etc., none render a border)

What options are there to render a border on just tfoot or tbody? Is applying a border to tbody or tfoot supported?

Sample CSS+HTML below, no border is rendered in Chrome 18, Firefox 9 or 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

Add

table {
 border-collapse: collapse;
}

and tune padding inside cells as needed (to compensate with the loss of the default spacing between cells).

(In jsfiddle, normalize.css contains this setting. One of the reasons why jsfiddle doesn’t always correspond to what happens when code is tested separately.)