桌子上边距为负的奇怪东西

Question

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

我有两个嵌套的 tables，像这样：

这是标记：

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

第一件奇怪的事

然后，我想在内部添加负水平边距 table:

.inner {
  margin: 0 -10%;
}

预期的输出是这样的：

但是，我得到的是：

可以通过将内部 table 放在 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（之前我们使用百分比，而不是像素），那么另外 table 只向左移动（就像第一种情况），它会显着减少宽度：

.inner {
  margin: 0 -10px;
}

问题

为什么会发生这两种奇怪的事情？
有什么方法可以解决？像我一样简单地使用包装器是一个好习惯，还是我应该使用另一种更聪明的方法？

Answer 1

如果maintable是width:100%;会一直展开，innertable会取最初的100%作为参考。只要没有内容，负边距就不会扩展它。它会工作，如果：https://jsfiddle.net/md2tx2d4/2/

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

或者如果你让它在没有宽度的情况下存在并让它从内容中增长

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

https://jsfiddle.net/md2tx2d4/1/

桌子上边距为负的奇怪东西

Strange things with negative margins on tables

html

css

第一件奇怪的事

第二件怪事

问题