css - How to align table with borders to baseline grid -


if have line-height equal baseline grid, row height , text wrapping works out nicely according grid. if want horizontal dividers, throws off baseline. i'd use negative margin account border's height, doesn't have effect on display:table-cell elements.

table {   line-height: 20px; } th, td {   border-bottom: solid 1px black; } 

i can't change line height 19px make because mean text wrapping throw off grid. there other ways make 1px additional height on each line?

this can solved using box-shadow between-cell lines instead of actual borders.

td, th {   box-shadow: 0 1px 0 black; } 

the box shadow won't take additional space, won't throw lines off grid.

here's jsfiddle showing in action.


Comments

Popular posts from this blog

c++ - Difference between pre and post decrement in recursive function argument -

php - Nothing but 'run(); ' when browsing to my local project, how do I fix this? -

php - How can I echo out this array? -