Bad interaction between line-height and border-width breaks vertical rhythm - can they be reconciled?

Question

I'm trying to implement a baseline/vertical rhythm on a responsive site. Top and bottom borders on table cells are causing me trouble. I have a minimal version of the problem here:

http://codepen.io/bakert/pen/akZWXE

If you set the border on th/td to 0 the vertical grid is respected from top to bottom and the text in both columns lines up. If you set the border to 0.0625em/1px/anything and scroll down below the table you will see that the columns are now out of whack. The text in the table itself is also no longer respecting the vertical grid.

The problem is that line-height does not account for border-width. The two things are additive in determining the height of the tds. Ideally I'm looking for something like box-sizing: border-box but for line-height + border.

I could solve this by explicitly giving th.bordered, td.bordered a fractionally smaller line-height than p but that sounds pretty awful. Should I be setting my vertical rhythm using something other than line-height? A combination of line-height and margin and I then reduce the margin by the width of the border? I'm hoping there's something simpler than that!

Answer 1

  table {
    width: 100%;
    box-shadow: inset -1px -1px 0 0 #ccc;
  }
  td {
    padding-right: 1em;
    width: 50%;
    box-shadow: inset 1px 1px 0 0 #ccc;
  }

EDIT - September 4th
Fix for background-color.
You can use border for element and margin should move element below 1px up. So border on table would not create another line-height problem. But this can not be used on elements.

  table {
    width: 100%;
    margin-bottom: -1px;
    border: 0 1px 1px 0;
    border-style: solid;
    border-color: #ccc;
  }