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 10 · Answer 1 · edited May 23 '17 at 11:45

10

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

97,268
26
150
164

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
1

Well done, your last solution still works quite well in 2022 :-) I wasn't aware that `display: table;` existed (as well as a dozen other table-related display settings) — and that it has been supported by major browsers for so long! Thanks! – Gwyneth Llewelyn Jul 29 '22 at 18:23

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,615
2
20
25

score 8 · Answer 3 · 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

12,577
3
50
36

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

5

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,338
1
22
40

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

4 Answers4

Update: