固定表格布局未充满指定的表格宽度

Question

我正在使用display:table和固定表格布局来展示网页应用程序中的一些数据。

表格宽度设置为100%。有两列，我明确地在第二列上设置了宽度。根据规范，在计算列宽度后，“如果表格比列宽度更宽，则额外空间应分配到列中。”

然而，当第二列是一个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>

我有点不明白，为什么会出现这种情况，该怎么解决呢？

- Grodriguez

---

使用表格来呈现表格数据，不要完全忽略表格的规则，只有在布局需要时才忽略它，你现在所做的是错误的。 - Mr. Alien

在我看来，这似乎不是表格数据，但我可能错了。也许它是可编辑的表格数据，而不是以表格形式呈现的表单。 - BoltClock

@BoltClock，仍然不正确，我宁愿使用带有嵌套标签(label)和输入(input)标签的ul li，两者都向左浮动，并使用clearfix清除每个li。 - Mr. Alien

@Mr.Alien 謝謝你的意見，但那並沒有回答這個問題。 - Grodriguez

@Grodriguez，那其实不是一个答案，而是一个建议 :) 或者更好地说是标准。 - Mr. Alien

@Mr.Alien 是哪个标准？ - Grodriguez

Answer 1

我认为你没有漏掉任何东西。您观察到的行为在各种浏览器中保持一致，但我无法在规范中找到任何涉及此行为的信息。我认为它可能与替换元素有关，但实际上规范说得不同：

使用这些“显示”值的替换元素在布局期间被视为给定的显示类型。例如，“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>

- BoltClock

---

我接受这个结果，因为它证实了我的猜想，即我的方法应该符合规范。 - Grodriguez

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%;
}

- ArinCool

---

是的，我知道我可以通过添加额外的div来解决这个问题。但我想知道为什么在直接使用输入元素时布局算法不按预期工作。此外，我宁愿避免向标记添加额外的元素。如果有纯CSS的解决方案，那就更好了。 - Grodriguez