Html 表格上空白处为负数的奇怪事物

这个问题不是很短，但很容易理解

这是你的电话号码

我有两个嵌套表，如下所示：

以下是标记：

<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>

预期输出如下所示：

但我得到的却是：

可以通过将内部表格放置在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>

问题

• 为什么这两种情况都会发生

• 解决这个问题的方法是什么？像我一样简单地使用包装器是一种好的做法，还是我应该使用另一种更聪明的方法

---

如果主表为

宽度：100%它将一直展开，内部表格将以初始100%作为参考。只要没有内容，负利润就不会扩大。
如果：

或者如果你让它活得没有宽度，让它从内容中成长

table { }
td {width:200px;/* instead real content missing here */}

在chrome inspector上，查看嵌套框。（白橙色和绿色）来描述宽度、填充和边距，这将更具意义，因为规范没有完全定义，它取决于实现。浏览器试图将内容考虑在内，但在您的情况下，这会导致大量循环定义。不要依赖结果。如果你想要一个定义良好的算法，你可以试试。@Oriol谢谢，很有趣
.inner {
  margin: 0 -10px;
}

.inner { margin:0 -10%; width:120%;}   

table { }
td {width:200px;/* instead real content missing here */}