html - 如何将带有边框的表格与基线网格对齐

Question

如果我的 line-height 等于我的基线网格，行高和文本换行会根据网格很好地工作。但如果我想要水平分隔线，它就会偏离基线。通常我会使用负边距来说明边框的高度，但这对 display:table-cell 元素没有任何影响。

table {
  line-height: 20px;
}
th, td {
  border-bottom: solid 1px black;
}

我无法将行高更改为 19px 来弥补它，因为这意味着文本换行会脱离网格。是否有其他方法可以弥补每行的 1px 额外高度？

Answer 1

这可以通过使用 box-shadow 作为单元格线而不是实际边框来解决。

td, th {
  box-shadow: 0 1px 0 black;
}

盒子阴影不会占用任何额外的空间，所以它不会从网格中抛出线条。

这是一个 jsfiddle showing it in action .