我在用display:table使用固定的表格布局在网络应用程序中显示一些数据。
表格宽度设置为 100%。有两列，我在第二列上明确设置了宽度。根据spec http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout，在计算出列宽后，“如果表比列宽，则多余的空间应分布在列上。”
然而，当第二列是一个时，这似乎没有按预期工作input元素。在这种情况下，第二列保留指定的宽度，第一列占据表格的 50%。额外的空间是not分布在列上，因此表格不会填充可用宽度。
这是一个例子；第一个测试按预期工作，第二个测试没有：
.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>
我错过了什么吗？为什么会发生这种情况，我该如何解决？
我不认为你错过了什么。您观察到的行为在浏览器中是一致的，但我在规范中找不到任何暗示此行为的内容。我认为这可能与替换的元素有关，但实际上规范另有说法 http://www.w3.org/TR/CSS21/tables.html#table-display:
具有这些“显示”值的替换元素在布局期间将被视为其给定的显示类型。例如，设置为“显示：表格单元格”的图像将填充可用的单元格空间，并且其尺寸可能有助于表格大小调整算法，就像普通单元格一样。
所以看起来表格的呈现方式应该没有任何差异。老实说，我不知道。我什至可以这么说every浏览器会因替换元素的存在而出错，因为当您使用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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
