thead和tbody之间的间距

我有这样一个简单的HTML表格:

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

我想用下面的方式来devise它:

  • 标题行与框阴影
  • 标题行和第一个正文行之间的空格

标题上的阴影+空间到正文

我尝试了不同的东西:

 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

有没有人有任何提示,我怎么能做到这一点? 或者达到相同的视觉效果(即bod-shadow +间距)?

    我觉得我有这个小提琴 ,我更新了你的 :

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

    此外,您可以使用Zero-Width Non-Joiner来最小化sinsedrix CSS:

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

    因此,box-shadow在tr元素上工作不正常,但是它对伪内容元素有效; sinsedrix把我放在正确的轨道上,这就是我最终的结果:

     table { position: relative; } td,th {padding: .5em 1em;} tr.even td { background-color: yellow; } tr.odd td { background-color: orange; } thead th:first-child:before { content: "-"; display: block; position: absolute; top: 0; left: 0; width: 100%; z-index: -1; box-shadow: 0 1px 10px #000000; padding: .75em 0; background-color: #ccc; color: #ccc; } thead th { padding-bottom: 2em; } 

    这会给你一些标题和表格内容之间的空白

     thead tr { border-bottom: 10px solid white; } 

    虽然设置边框颜色是一个作弊的方法,它会正常工作。

    表单调查,你不能设置表格行的阴影,但你可以到表单元格:

     th { box-shadow: 5px 5px 5px 0px #000000 ; } 

    (我不确定你想要阴影是怎么样的,所以只需调整上面的。)

    这在Chrome上适用于我(对于其他浏览器,我不知道)。

     .theTargethead::after { content: ""; display: block; height: 1.5em; width: 100%; background: white; } 

    这样的CSS代码在表格的add和tbody之间创build一个空的空白区域。 如果我将背景设置为透明,上面的tr> th元素的第一列显示了它自己的颜色(在我的情况下是绿色),使得:: after元素的前1cm也是绿色。

    在行content : "-";还使用“ – ”符号content : "-"; 当输出打印的页面到文件时,而不是空string“”可能产生问题,即pdf。 当然这是parsing器/导出器的依赖。 这样用pdf编辑器打开的输出文件(例如:MS Word,Excel,OpenOffice,LibreOffice,Adobe Acrobat Pro)仍然可以包含减号。 空string不具有相同的问题。 如果将打印的html表格导出为图像,则不会在两种情况下都出现问题:不显示任何内容。

    即使使用内容,我也没有注意到任何问题:“\ 200C”;

    这应该做的伎俩:

     table { position: relative; } thead th { // your box shadow here } tbody td { position: relative; top: 2rem; // or whatever space you want between the thead th and tbody td } 

    这对大多数浏览器来说应该是不错的。