How to remove inexplicable padding in table cell caused by padding in child div?

Question

Check out this fiddle to see a demo of the problem: http://jsfiddle.net/rV6Jg/

All padding on table cells is removed, and border-collapse is set to collapse on the <table> element. The bottom row contains a single cell, which in turn contains a <div> that has padding set. This padding somehow causes padding not only on the <div> but it's parent cell. When I remove the padding on the child <div>, the padding on the parent cell disappears.

Here's the source code for reference

HTML:

<div class='wrapper'>
  <table class='table' border=1>
    <tr>
      <td>
        Toolbar stuff goes here...
      </td>
    </tr>
    <tr>
      <td>
        <div class='boxWrapper'>
          <div class='box'>Content stuff goes here...</div>
        </div>
      </td>
    </tr>
  </table>
</div>

CSS:

html,body{padding:0px;margin:0px;height:100%;}
.wrapper{
  padding:1em;
  height:100%;
  box-sizing:border-box;
}
.table{
  border-collapse:collapse;
  width:100%;
  height:100%;
  box-sizing:border-box;
}
.table td{
  padding:0px !important;
}
.table tr:last-child{
  height:100%;
}
.boxWrapper{
  padding:1em;
  height:100%;
  box-sizing:border-box;
}
.box{
  box-shadow:inset 0px 0px 5px #ccc;
  padding:1em;
  height:100%;
}

UPDATE

It seems I did not make it clear that I want padding on the <div>s inside the , but not on the <td> itself, which as you can see from the following screenshot, does indeed have padding (in green):

UPDATE 2

Setting box-sizing:border-box on .box doesn't solve the problem as suggested in this fiddle

Answer 1

Set the vertical alignment on your table cells;

.table td{
    padding:0px !important;
    vertical-align:top;
}

jsFiddle example

Update (2018-07-16): setting box-sizing: border-box; on .box fixes the issue in Chrome.