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 }
这对大多数浏览器来说应该是不错的。
