为何在特定情况下td没法设置宽度？

Question

当document为此情况下时，设置td的宽度无效，删除任意一条css则可生效，求解释？
http://codepen.io/quietcoder/...

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

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

而且，如果我设置了两个table在盒子里面，td的宽度又奇迹般的生效了

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

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

并且，如果你打开控制台，检查div.inner的宽度，他的宽度并不是两个生效td宽度的table的和，而是两个未生效td宽度的和

Answer 1

浏览器显示：100px

浏览器显示：200px

代码就是你写的这个，是可以显示的啊

Answer 2

审查了一下元素、因为是display:table-cell、在td的样式中加入style="width:100px;display:inline-block;"

可以解决你的宽度问题