html – 表格上有负边距的奇怪事物

这是jsFiddle

我有两个嵌套表,像这样：

这是标记：

<table class="outer">
  <tr>
    <td></td>
    <td>
      <table class="inner">
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
    <td></td>
  </tr>
</table>

<style>
table,tr,td {
  border: 1px solid black;
  border-collapse: collapse;
}

table {
  width: 100%;
}

.outer {
  height: 100px;
}

.inner {
  background-color: #ccc;
  height: 50px;
}
</style>

第一个奇怪的事情

然后,我想在内表中添加负水平边距：

.inner {
  margin: 0 -10%;
}

预期的输出是这样的：

但相反,我得到了这个：

将内部表放在div中可以解决问题：

<!-- outer table -->
  <div class="wrapper">
    <table class="inner-wrapped">
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </div>
<!-- outer table -->

<style>
.wrapper {
  margin: 0 -10%;
}

.inner-wrapped {
  background-color: rgb(0,200,0);
  height: 50px;
}
</style>

第二个奇怪的事情

如果我设置负水平边距-10px(之前我们使用的是百分比,而不是像素),那么另外该表只向左移动(就像第一种情况一样),它在宽度上有明显的减少：

.inner {
  margin: 0 -10px;
}

问题

>为什么这两个东西都会发生？
>有什么方法可以解决它？像我一样简单地使用包装器是一种好习惯,还是应该使用另一种更聪明的方法？