Question

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

表格宽度设置为100％。有两列，我在第二列显式设置宽度。根据{{3}}，在计算列宽后，“如果表格比列宽，则应在列上分配额外空格。”

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

用这些＆＃39;显示＆＃39;替换元素。在布局期间，值被视为给定的显示类型。例如，设置为＆＃39;显示的图像：table-cell＆＃39;将填充可用的单元格空间，其尺寸可能有助于表格大小调整算法，就像普通单元格一样。

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

由于替换元素的性质，我不认为有一种方法可以使用CSS来解决这个问题。我能想到的唯一选择是在第一个测试用例中将该单元格设置为非替换元素，例如input，并将div放入未替换元素中。

＆＃13;

input

＆＃13;

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

＆＃13;

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

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

2 个答案: