html - 固定表格布局不填充指定的表格宽度

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 :

Replaced elements with these 'display' values are treated as their given display types during layout. For example, an image that is set to 'display: table-cell' will fill the available cell space, and its dimensions might contribute towards the table sizing algorithms, as with an ordinary 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>