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.

Margin doesn't apply to internal `` elements - http://www.w3.org/TR/CSS2/box.html#margin-properties — Adrift, Aug 21 '13 at 12:44
Possible duplicate? http://stackoverflow.com/questions/9258754/spacing-between-thead-and-tbody — adriaanp, Aug 21 '13 at 12:44

score 8 · Accepted Answer · answered Aug 21 '13 at 12:44

8

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/

answered Aug 21 '13 at 12:44

james31rock

2,545
2
18
25

score 8 · Answer 2 · answered Jun 18 '15 at 16:25

8

Here is my solution:

.common-table-body:before {
  line-height:1.5em;
  content:".";
  color:white;
  display:block;
}

answered Jun 18 '15 at 16:25

Haimei

11,985
3
47
35

score 7 · Answer 3 · edited May 23 '17 at 11:45

7

Use border-spacing property:

#myTbl {
    border-collapse: separate;
    border-spacing: 5px;
}

Fiddle

margin property:

Applies to all elements except elements with table display types other than table-caption, table and inline-table.

I explained Why probably there's no other way to achieve this, lately on SO.

Update:

Your solution adds spacing between all cells.

Then you need to change the display type to be able to use margin property:

#myTbl thead {
    display: table;
    width: 100%;
    margin-bottom: 10px;
}

#myTbl tfoot {
    display: table;
    width: 100%;
    margin-top: 10px;
}

Fiddle

edited May 23 '17 at 11:45

Community

1
1

answered Aug 21 '13 at 12:43

Hashem Qolami

93,110
25
145
156

Your solution adds spacing between all cells. This is what I was looking for: http://jsfiddle.net/nCe3k/10/ – Jérôme Verstrynge Aug 21 '13 at 12:54
1

Ok, but when there are multiple columns, it does not work anymore: http://jsfiddle.net/nCe3k/13/ – Jérôme Verstrynge Aug 21 '13 at 13:15
@JVerstry, Yes in that case it fails. But note that `padding` is useful only when you don't have any `background` or `border` in `thead` and `tfoot` cells. – Hashem Qolami Aug 21 '13 at 13:20

score 4 · Answer 4 · answered Aug 21 '13 at 12:50

4

You can add an empty row between the head and body/body and footer -

     ...</thead>
     <tr height="10px"></tr>
     <tbody>...

answered Aug 21 '13 at 12:50

sideroxylon

4,120
1
20
38

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

4 Answers4

Update: