Ben Ben - 2 months ago 13
CSS Question

Spacing between thead and tbody

I have a simple html table like this:

<table>
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tbody>
<tr class="odd first-row"><td>Value 1</td><td>Value 2</td></tr>
<tr class="even"><td>Value 3</td><td>Value 4</td></tr>
<tr class="odd"><td>Value 5</td><td>Value 6</td></tr>
<tr class="even last-row"><td>Value 7</td><td>Value 8</td></tr>
</tbody>
</table>


And I would like to style it the following way:


  • header row with a box-shadow

  • whitespace between the header row and the first body row



Box Shadow on Header + Spacing to Body

I have tried different things:

table {
/* collapsed, because the bottom shadow on thead tr is hidden otherwise */
border-collapse: collapse;
}
/* Shadow on the header row*/
thead tr { box-shadow: 0 1px 10px #000000; }
/* Background colors defined on table cells */
th { background-color: #ccc; }
tr.even td { background-color: yellow; }
tr.odd td { background-color: orange; }

/* I would like spacing between thead tr and tr.first-row */

tr.first-row {
/* This doesn't work because of border-collapse */
/*border-top: 2em solid white;*/
}

tr.first-row td {
/* This doesn't work because of border-collapse */
/*border-top: 2em solid white;*/
/* This doesn't work because of the td background-color */
/*padding-top: 2em;*/
/* Margin is not a valid property on table cells */
/*margin-top: 2em;*/
}


See also: http://labcss.net/#8AVUF

Does anyone have any tipps on how I could do this? Or achieve the same visual effect (i.e. bod-shadow + spacing)?

Thanks!

Answer

I think I have it in this fiddle and I updated yours:

tbody:before {
    content: "-";
    display: block;
    line-height: 1em;
    color: transparent;
}