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

Question

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 1

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/