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
Post a Comment