14

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>

2 Answers 2

13

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.)

2
  • adding your style declaration on the table element works. I now see a black border rendered above the tfoot content in FF10, Chrome18, and Safari 5. I do not see a border in IE9 and in Opera 11.6 I see two borders.
    – John
    Commented Feb 13, 2012 at 1:45
  • On IE9, this seems to depend on mode; in IE9 mode and IE8 it works, in Quirks mode not. The Opera behavior is really odd, because it draws, in addition to the requested border, a bottom border for the thead element. I can’t find a better way to work around this bug than adding table.sample thead { border-bottom: 2px solid transparent; }. Commented Feb 13, 2012 at 5:50
3

You can apply borders to tfoot and tbody.

See the following fiddle for proof!

http://jsfiddle.net/KHx24/

Try

<style type="text/css">
    table.sample tfoot
    {
       border-top: 2px solid black;
    }
</style>
1
  • Yes, the fiddle link provided (style w/out collapse) I see this render OK and I do see the border in Chrome. But as @jukka noted jsfiddle adds collapse so when I tested locally w/out the collapse style I do not see the border in Chrome18. But what is odd is that looking at your fiddle link in IE9 I do see the border, this is odd because locally I do not see the border in IE9 even with the collapse style on table (which I believe essentially mimics what fiddle does). Fiddle must be applying some other styles too that cause IE9 to render this border, what other styles?
    – John
    Commented Feb 13, 2012 at 2:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.