CODEWITHSUNDEEP
htmlcsshtml-table
John
John

Reputation: 418

CSS options to apply a border to tfoot? Styling tfoot with "border-top" does not work

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>

Upvotes: 14

Views: 23945

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201738

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

Upvotes: 13

Jason
Jason

Reputation: 11615

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>

Upvotes: 3

Related Questions