body与html 会有间隙,css – thead和tbody之间的间距

我有一个简单的html表，像这样：

Column 1Column 2

Value 1Value 2Value 3Value 4Value 5Value 6Value 7Value 8

我想用下面的方式来设计它：

>带有阴影的标题行

>标题行和第一个正文行之间的空格

我尝试了不同的事情：

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;*/

}

有没有人有任何tipps如何我可以这样做？或实现相同的视觉效果(即身体阴影间距)？

谢谢！