If I have a line-height equal to my baseline grid, row height and text wrapping works out nicely according to the grid. But if I want horizontal dividers, it throws off the baseline. Normally I'd use a negative margin to account for the border's height, but that doesn't have any effect on display:table-cell elements.
如果我的行高等于我的基线网格，行高和文本换行根据网格很好地工作。但如果我想要横向分隔线，它会抛弃基线。通常我会使用负边距来计算边框的高度，但这对显示没有任何影响：table-cell元素。
table {
line-height: 20px;
}
th, td {
border-bottom: solid 1px black;
}
I can't change the line height to 19px to make up for it because that would mean text wrapping would throw off the grid. Are there other ways to make up for that 1px additional height on each line?
我不能将行高改为19px来弥补它，因为这意味着文本包装会抛弃网格。还有其他方法可以弥补每条线上1px的额外高度吗？
1 个解决方案
#1
1
This can be solved by using box-shadow for the between-cell lines instead of actual borders.
这可以通过使用盒子阴影来解决细胞间线而不是实际边界。
td, th {
box-shadow: 0 1px 0 black;
}
The box shadow won't take up any additional space, so it won't throw lines off the grid.
框阴影不会占用任何额外的空间，因此它不会从网格中抛出线条。
Here's a jsfiddle showing it in action.
这是一个jsfiddle显示它在行动。
#1
1
This can be solved by using box-shadow for the between-cell lines instead of actual borders.
这可以通过使用盒子阴影来解决细胞间线而不是实际边界。
td, th {
box-shadow: 0 1px 0 black;
}
The box shadow won't take up any additional space, so it won't throw lines off the grid.
框阴影不会占用任何额外的空间，因此它不会从网格中抛出线条。
Here's a jsfiddle showing it in action.
这是一个jsfiddle显示它在行动。