Как выровнять таблицу с границами к базовой сетке

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, показывающий это в действии.