如何将表格与边框对齐到基线网格

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。