How to align table with borders to baseline grid

Question

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 {
  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?

Answer 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.