html - 表格单元格元素的大小问题，为什么？

Question

我正在尝试安排一个输入组。我正在使用 Bootstrap ，但该问题(幸运的是)也可以在纯 HTML/CSS 中重现。

我有一个 100% 宽度的 display: table 容器，我正在尝试放置一个 16.666% 宽度的 span，以及一个83.3333% 宽度 input 进去。但由于我见过的最奇怪的魔法，它们并没有填满整个空间。检查元素时，我可以看到 span 宽度计算正确，但 input 宽度远小于应有的宽度，因此它不会填充空间它应该。

但是，如果我放置两个 input 元素(所以一个 input 而不是 span，它会按预期工作。

请查看此 DEMO fiddle

我已经在最新的 Chrome 和 IE11 中重现了这个问题，所以我想这不是特定的浏览器错误。

我想知道发生了什么，如果不是这样，我该如何实现我的目标。

Answer 1

我不会将输入用作表格单元格。使用其他东西代替，然后将输入宽度设置为 100%，这样它就会填满容器。

还添加了表格行:

<div class="w6">
  <div style="display: table; background-color: brown;">
    <div style="display: table-row" class="w12">
      <span class="w2" style="display: table-cell; background-color: blue;"></span>
      <!--<input type="text" class="w2"/>-->
      <span class="w10">
        <input type="text" />
      </span>
    </div>
  </div>
</div>

https://jsfiddle.net/p4q40j22/1/