JVerstry JVerstry - 10 days ago 8
CSS Question

How to put a bit of space between table footer/header and body content?

I want to put a bit of space between HTML table header and footer, and my body content. I though margin-top and margin-bottom would do it, but it does not. Yet the font-weight: bold; directive is taken into account.

My HTML:

<table id="myTbl">
<thead>
<tr>
<th>My Table Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>My Body Content</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>My Table Footer</th>
</tr>
</tfoot>
</table>


My CSS:

#myTbl {
font-weight: normal;
}

#myTbl thead {
font-weight: bold;
margin-bottom: 10px;
}

#myTbl tfoot {
font-weight: bold;
margin-top: 10px;
}


The JSFiddle is available here. I am using Chrome.

Answer

try using padding on the th elements.

#myTbl {
    font-weight: normal;
}

#myTbl thead tr th{
    font-weight: bold;
    padding-bottom: 10px;
}

#myTbl tfoot tr th{
    font-weight: bold;
    padding-top: 10px;
}

http://jsfiddle.net/nCe3k/9/