Css 车斗和车身之间的间距

我有一个简单的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>

另见：

---

有谁能告诉我怎么做吗？或者实现相同的视觉效果（即bod阴影+间距）？

这将在标题和表格内容之间留出一些空白

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

虽然设置边框颜色有点像作弊，但效果很好

表单调查中，不能将框阴影设置为表行，但可以设置为表单元格：

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

（我不确定您希望阴影看起来是什么样子，所以只需调整上面的内容即可。）

我想我在这里有它，我更新了：

编辑更好更简单：

tbody:before {
    content:"@";
    display:block;
    line-height:10px;
    text-indent:-99999px;
}

---

这样，文本实际上是不可见的

，因此框阴影在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;
}

---

此外，您还可以使用零宽度非连接器来最小化sinsedrixCSS：

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

---

这在Chrome上对我有效（对于其他浏览器我不知道）

这样的css代码在表的thead和tbody之间创建一个空白。 如果我将背景设置为透明，则上述tr>th元素的第一列将显示其自身的颜色（在我的示例中为绿色），使：：after元素的前1厘米也变成绿色

在

内容：“-”行中也使用“-”号而不是空字符串“”会在将打印页面导出到文件（即pdf）时产生问题。当然，这取决于解析器/导出器。
使用pdf编辑器打开的导出文件（例如：Ms word、Ms Excel、OpenOffice、LibreOffice、Adobe Acrobat Pro）仍可能包含减号。空字符串没有相同的问题。
如果将打印的html表导出为图像，则在这两种情况下都不会出现问题：不会呈现任何内容

我甚至在使用时都没有注意到任何问题

content : "\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
}

这对大多数浏览器来说应该很好
 虽然上面所有的解决方案都很好，但结果在不同的浏览器中是不一致的，所以我根据自己使用电子邮件模板的经验，找到了一种更好的方法。
只需在实际tbody和THAD之间添加一个虚拟tbody，嵌套在虚拟tbody中的应该是一个td，高度设置为所需间距。下面的例子



//假弹体
//实际弹体
{{tableRowItem}}
可能类似于：我认为不能对表体进行边框折叠，但对表头不能。或者我不明白你的问题。@sinsedrix我添加了一个图形来显示样式应该是什么样子。这能让它更清晰吗？边界对我根本不起作用，因为阴影最终被渲染在边界的“中间”。。。我想tr上的方块阴影是我的问题。使用th并没有给我想要的效果，因为我基本上希望标题行有一个“发光效果”（即行的阴影，而不是单个单元格）非常酷，这看起来很有希望！非常感谢。不幸的是，这一切似乎只适用于firefox…也许设置可见性更好：隐藏；不要把文本涂成白色，因为你不想依靠假定的背景色来轻松更改样式。我将使用“显示：表格行”来获取行的全宽。令人惊讶的是，现在快到2020年了，我们仍然需要使用这些技巧来在表头和表体之间创建空间，太疯狂了：）@AlexanderCherednichenko这篇帖子是2012年的，所以在2022年10岁生日的时候再来：）你做到了。我建议添加：
td，th{padding:.5em 1em；}table{border collapse:collapse；}和th:first child:before{height:1.8em；}
（只是让它看起来更像原来的样子。）刚刚意识到你问了这个问题，所以你可能已经把它排序好了。：）是的；-）我已经更新了答案，使其看起来像问题中的屏幕截图，以防其他人无意中发现这个问题……我想通过将主体部分隔开来“拼凑”一张表。代码的一个变体起到了作用：
表tbody:not（：last child）：在
之后，我特别高兴的是
：not（）
在所有主要浏览器中都能正常工作，因此我不必编写单独的位来取消表尾的空格
.theTargethead::after
{
    content: "";
    display: block;
    height: 1.5em;
    width: 100%;
    background: white;
}

content : "\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
}