html - 为什么当 `td` 写入两个 div 而一个设置为 `position: absolute` 和另一个 `position: relative` 时我不能在 td 中设置宽度？

Question

就像标题一样，我无法在特定环境下设置td width，你可以看这里的演示http://codepen.io/quietcoder/pen/ygRVLB?editors=1100

.outer {
  position: relative;
  display: inline-block;
}
.inner {
  position: absolute;
}

<div class="outer">
  <div class="inner">
    <table>
      <tr>
        <td style="width: 100px">
          <div>123</div>
        </td>
        <td>
          <div>123</div>
        </td>
      </tr>
    </table>
  </div>
</div>

然后，如果我写两个表，td 中的宽度就可以了，太神奇了!!!你知道为什么会这样吗？

.outer {
  position: relative;
  display: inline-block;
}
.inner {
  position: absolute;
  white-space: nowrap;
}
.inline-block-box {
  display: inline-block;
}

<div class="outer">
  <div class="inner">
    <div class="inline-block-box">
      <table>
        <tr>
          <td style="width: 100px">
            <div>123</div>
          </td>
          <td>
            <div>123</div>
          </td>
        </tr>
      </table>
    </div>
    <div class="inline-block-box">
      <table>
        <tr>
          <td style="width: 100px">
            <div>123</div>
          </td>
          <td>
            <div>123</div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

如果你查看devtool中的div.inner width属性，你会发现这个宽度很有意思……你能解释一下吗？

Answer 1

首先你必须设置表格的宽度，然后 td 会调整大小

    .outer {
      position: relative;
      display: inline-block;
    }
    .inner {
      position: absolute;
    }

<div class="outer">
      <div class="inner">
        <table style="width: 200px">
          <tr>
            <td style="width: 100px">
              <div>123</div>
            </td>
            <td>
              <div>123</div>
            </td>
          </tr>
        </table>
      </div>
    </div>