Html 盒子的阴影<；th>；标签不是连续的

我今天从表格开始，偶然发现了许多问题。我尝试做的主要事情是创建一个表，在第th行下面有边框半径和边框+方框阴影

我尝试的第一件事是使用边界塌陷：塌陷属性。 但在使用此选项后，无法仅使用CSS为表指定边框半径。所以我不认为这是一种选择。 由于tr标记似乎不适用于border和box shadow属性，因此我必须使用每个th标记。但这样做之后，我在每个th标签之间都有奇怪的空格（用红色标记）。边框本身很好，但长方体阴影有那些奇怪的空白

以下是HTML代码（仅2行，而不是全部16:D）：

---

有没有我忽略的简单解决方案？如果有任何提示，我将不胜感激，并提前表示感谢。：）

这是因为你的

扩散半径

有一个负值，所以它将阴影拉进来

您最好在

th

周围添加

thead

，并将其应用于此，或者如果您无法更改HTML结构，则可以执行以下操作：

table.VitaTable tr:first-chidild {
  box-shadow: 0px 6px 3px -3px #e4e4e4;
}

然后从所有

th

中移除

框阴影

如果您可以在图像上提供一个工作代码示例，这将更容易回答。你可以在图片中看到很多东西，但是粘贴在这里的代码中没有显示出来。怎么了？我发布的代码基本上就是它。如果你能准确地告诉我你需要什么，也许我可以提供你需要的东西：）嘿，谢谢你的帮助！：）因此，我粘贴了以下CSS:table.vitable tr:first child{box shadow:0px 6px 3px-3px#e4；}，并在表头周围添加了一个测试。然而，这似乎不起作用：（我做错了什么吗？@AlphaLeviathan别担心！如果这回答了你的问题，请标记：）编辑了我的上一篇文章，刚刚认识到输入关键帖子而不是破折号：D也许你可以看看：）@AlphaLeviathan我已经附上了一个JSFIDLE，根据你的代码示例向你展示了工作代码谢谢你的努力！但现在表格的边框半径不再起作用：/
/* Table */
table.VitaTable {
  border: 1px solid #424242;
  border-radius: 8px;
  box-shadow: 0px 0px 10px 5px #e4e4e4;
}

/* Header*/

th.VitaTableHeaderL {
  border-bottom: 1px solid #424242;
  box-shadow: 0px 6px 3px -3px #e4e4e4;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 12px;
}

th.VitaTableHeader {
  border-bottom: 1px solid #424242;
  box-shadow: 0px 6px 3px -3px #e4e4e4;
  padding-top: 10px;
  padding-bottom: 10px;
}

th.VitaTableHeaderR {
  border-bottom: 1px solid #424242;
  box-shadow: 0px 6px 3px -3px #e4e4e4;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 12px;
}

/* Info */

td.VitaTableInfoL {
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 12px;
}

td.VitaTableInfo {
  padding-top: 7px;
  padding-bottom: 7px;
}

td.VitaTableInfoR {
  padding-top: 7px;
  padding-bottom: 7px;
  padding-right: 12px;
}

.VitaPlaybutton {
  width: 20px;
}

table.VitaTable tr:first-chidild {
  box-shadow: 0px 6px 3px -3px #e4e4e4;
}