I’m trying to set the height of a row without the inner context of a cell affecting this row height (i.e. if the content of that cell or the element(s) within, that should affect the row height).

I received some great advice to use height: inherit on the <td>, but that doesn’t seem to be taking into account the border width. It seems as if that’s added on top of the row height (the row height is 21px when inspected in Chrome/Safari dev utils). How can I make the table cells/rows to stick to the 20px without explicitly setting their height individually?

<table style='box-sizing: border-box; border-spacing: 0; border-collapse: collapse;'>
  <tr style='height: 20px'>
    <td>
      <div style='height: inherit;'>
        <div style='font-size: 30px; background-color: green'>Foobar</div>
      </div>
    </td>
    <td>test1</td>
    <td>test2</td>
  </tr>
    <tr style='height: 20px'>
    <td>
      <div style='height: inherit'>
        <div style='font-size: 30px; background-color: green'>Foobar</div>
      </div>
    </td>
    <td>test1</td>
    <td>test2</td>
  </tr>

</table>

td {
  height: inherit;
  border-width: 1px 1px 1px 1px;
  border-color: red;
  border-style: solid;
  overflow: hidden;
  padding: 0 0 0 0;
}