aad和tbody之间的间距 [英] Spacing between thead and tbody

问题描述

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

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

我想用以下方式来设定风格：

• 标题行与框阴影


• 标题行和第一个正文行之间的空白









我尝试过不同的事情：

  table {
 / * collapsed，因为底部的阴影在ad上被隐藏否则* / 
 border-collapse：collapse; 
} 
 / *标题行上的阴影* / 
 thead tr {box-shadow：0 1px 10px＃000000; } 
 / *表格单元格上定义的背景颜色* / 
 th {background-color：#ccc; } 
 tr.even td {background-color：yellow; } 
 tr.odd td {background-color：orange; } 
 
 / *我希望在tr和tr.first-row之间保持间距* / 
 
 tr.first-row {
 / *这不是因为边界崩溃* / 
 / * border-top：2em solid white; * / 
} 
 
 tr.first-row td {
 / *这不工作，因为border-collapse * / 
 / * border-top：2em纯白色; * / 
 / *这不工作，因为td background-color * / 
 / * padding-top：2em; * / 
 / *保证金不是表格单元格上的有效属性* / 
 / * margin-top：2em; * / 
} 
  

另请参阅： http://labcss.net/#8AVUF





有没有人有任何技巧如何做到这一点？或者达到相同的视觉效果（即bod-shadow +间距）？





谢谢！

解决方案

我认为我在这个小提琴中有它，我更新了您的：

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




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

Thanks!

解决方案

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

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

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