html - 如何防止背景颜色隐藏框阴影？

Question

将 background-color 添加到 td 或 tr 隐藏父表上的 box-shadow .

最小的例子:

table {
  box-shadow: inset -1px -1px 0 0 blue;
  border-collapse: collapse;
}

td {
  box-shadow: inset 1px 1px 0 0 blue;
}

.highlight {
  background-color: #efe;
}

<table>
  <tr>
    <td>box shadow border fine here</td>
  </tr>
   <tr>
    <td>and here</td>
  </tr>
  <tr class="highlight">
    <td>but not with background-color</td>
  </tr>
</table>

我正在使用 box-shadow 在表格上伪装边框。我在每个 td 上显示“顶部和左侧”，在 table 本身上显示“底部和右侧”以填充缺失的部分。

但是如果我的表中的任何 td 或 tr 有一个 background-color (.highlight)来自 table 的 box-shadow 消失了。

(至于我为什么这样做，是因为我在网站上设置了垂直节奏，这也适用于表格中的文本。如果我使用标准表格边框和标准行高，我会打破垂直节奏. 即使我想通过更改行高来不完美地考虑边框，我也不能，因为文本可能会换行，使我对行高的边框调整适用于每一行文本，而不是仅适用于文本 block 一次。)

Answer 1

使用没有任何偏移的框阴影。 像这样:

table {
  border-collapse: collapse;
  border-spacing: 0;

}

td {
  box-shadow: inset 0px 0px 1px blue;
}

.highlight {
  background-color: yellow;
}