如何删除子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%;
}

更新

似乎我没有说清楚我想在<div>内部填充，而不是在<td>本身上填充，正如您从下面的屏幕截图中看到的那样，确实有填充（绿色）：

更新2

在box-sizing:border-box上设置.box无法解决此fiddle

中建议的问题

Answer 1

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

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

<强> jsFiddle example

更新（2018-07-16）：在box-sizing: border-box;上设置.box修复了Chrome中的问题。

Answer 2

很难理解你正在尝试做什么，但如果你change padding to margin细胞周围的额外空间不再存在。

Answer 3

也许我弄错了，但对我来说，看起来好像你实际上为包装器定义了填充。您已在css中指定了1em 两次的填充，一次为div，一次为其包装：

.boxWrapper{
  padding:1em;
  height:100%;
  box-sizing:border-box;
}
.box{
  box-shadow:inset 0px 0px 5px #ccc;
  padding:1em;
  height:100%;
}

如果我在你提供的小提琴手中删除其中一个（或两个），那么我会得到一个人们期望的行为......

Answer 4

只需将box-sizing: border-box;添加到.box