Spacing between thead and tbody

Question

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

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 tips on how I could do this? Or achieve the same visual effect (i.e. bod-shadow + spacing)?

Answer 1

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

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

EDIT better & simpler:

tbody:before {     content:"@";     display:block;     line-height:10px;     text-indent:-99999px; } 

This way text is really invisible

Answer 2

Moreover you can use Zero-Width Non-Joiner to minimize sinsedrix CSS:

tbody:before {line-height:1em; content:"\200C"; display:block;}