如何删除子div中填充引起的表格单元格中无法解释的填充？

Question

看看这个小提琴,看看问题的演示:http://jsfiddle.net/rV6Jg/

上表单元格的所有填充被去除,并且border-collapse被设置为collapse在上<table>元件.底行包含一个单元格,该单元格又​​包含一个<div>具有填充集的单元格.这种填充不仅会导致填充,<div>而且它的父单元格也会填充.当我删除子项上<div>的填充时,父单元格上的填充消失.

这是参考源代码

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

似乎我没有说清楚我想在<div>内部的s 上填充,而不是在<td>自身上填充,正如你从下面的截图中看到的那样,确实有填充(绿色):

更新2

设置box-sizing:border-box在.box在此建议并不能解决问题小提琴

Answer 1

在表格单元格上设置垂直对齐方式;

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

jsFiddle例子

更新(2018年7月16日):设置box-sizing: border-box;上.box修复该问题在Chrome中.