thead 和 tbody 之间的间距

问题描述

我有一个简单的 html 表格，如下所示:

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:

• 带有框阴影的标题行
• 标题行和正文第一行之间的空白

我尝试了不同的东西:

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

另见: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)?

推荐答案

我想我在这个fiddle 我更新了你的:

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;
}

这样文字真的不可见

这篇关于thead 和 tbody 之间的间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！