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

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。