固定表格布局未填充指定表格宽度

Question

我正在使用具有固定表格布局的display:table 在网络应用程序中显示一些数据。

表格宽度设置为 100%。有两列，我明确设置第二列的宽度。根据spec，计算完列宽后，“如果表格比列宽，多余的空间应该分布在列上。”

但是，当第二列是 input 元素时，这似乎没有按预期工作。在这种情况下，第二列保留指定的宽度，第一列占表格的 50%。额外的空间不分布在列上，因此表格不会填满可用的宽度。

这是一个例子；第一个测试按预期工作，第二个没有：

.row {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.cell {
  display: table-cell;
  border: 1px solid #aaa;
}
.right {
  width: 200px;
}

<p>Test 1 -- works as expected</p>
<div class="row">
  <div class="cell">Label</div>
  <div class="cell right">Field</div>
</div>

<p>Test 2 -- table does not fill available width</p>
<div class="row">
  <div class="cell">Label</div>
  <input class="cell right" type="text" value="Text input" />
</div>

我错过了什么吗？为什么会发生这种情况，我该如何解决？

Answer 1

我不认为你错过了什么。您观察到的行为在浏览器中是一致的，但我在规范中找不到暗示这种行为的任何内容。我认为这可能与替换元素有关，但实际上规范says otherwise：

具有这些“显示”值的替换元素在布局期间被视为其给定的显示类型。例如，设置为 'display: table-cell' 的图像将填充可用的单元格空间，其尺寸可能会影响表格大小算法，就像普通单元格一样。

所以看起来表格的呈现方式应该没有任何区别。老实说，我不知道。我什至可以说 每个 浏览器都被替换元素的存在绊倒了，因为当您使用 img 代替 input 时会发生相同的行为，但是我没有足够的证据来确定这种行为是否是预期的。

由于替换元素的性质，我认为没有办法仅使用 CSS 来解决此问题。我能想到的唯一替代方法是在您的第一个测试用例中将该单元格设为不可替换元素，例如 div，并将 input 放入不可替换元素中。

.row {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.cell {
  display: table-cell;
  border: 1px solid #aaa;
}
.right {
  width: 200px;
}
.right input {
  width: 100%;
  box-sizing: border-box;
}

<div class="row">
  <div class="cell">Label</div>
  <div class="cell right">Field</div>
</div>

<div class="row">
  <div class="cell">Label</div>
  <div class="cell right"><input type="text" value="Text input" /></div>
</div>

Answer 2

检查此Fiddle。

在第二行，而不是

<input class="cell right" type="text" value="Text input" />

做

<div class="cell right"><input type="text" value="Text input" style="width: 98%;"/></div>

并更改 CSS：

.row {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.cell {
  display: table-cell;
  border: 1px solid #aaa;
    width: 50%;
}
.right {
  width: 50%;
}