Spacing between thead and tbody
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
This will give you some white space between the header and table content
thead tr {
border-bottom: 10px solid white;
}
Although setting the border colour is a bit of a cheat method, it will work fine.
Form investigation, you can't set box-shadow to a table row, but you can to table cells:
th {
box-shadow: 5px 5px 5px 0px #000000 ;
}
(I'm not sure how you want the shadow to look like, so just adjust the above.)
Moreover you can use Zero-Width Non-Joiner to minimize sinsedrix CSS:
tbody:before {line-height:1em; content:"\200C"; display:block;}