固定表布局不填充指定表宽度 [英] Fixed table layout not filling specified table width

问题描述

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

表格宽度设置为100％。有两列，我明确设置第二列的宽度。根据规范，在计算列宽后，如果表比列更宽，额外的空间应该分布在列上。

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

这里是一个例子;第一个测试按预期工作，第二个测试按预期工作，第二个不工作：

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

 < p>测试1  - 按预期工作< / p>< div class =row> < div class =cell> Label< / div> < div class =cell right>栏位< / div>< / div>< p>测试2  - 表格不填满可用宽度< / p>< div class =row> < div class =cell> Label< / div> < input class =cell righttype =textvalue =Text input/>< / div>   
 
 
我错过了什么？为什么会发生这种情况，我该如何解决？
解决方案
你所观察到的行为在不同的浏览器是一致的，但我不能在规范中找到任何暗示这种行为。我认为这可能与替换的元素有关，但实际上规范否则：
 
 
使用这些'display'值替换的元素在布局期间被视为其给定的显示类型。例如，设置为display：table-cell的图像将填充可用的单元格空间，其尺寸可能有助于表大小调整算法，就像普通单元格一样。
 
 < blockquote> 
 
 
所以看起来似乎不应该有什么区别，如何表的表示。老实说，我不知道。我可以说，由于使用 img 浏览器都会被替换的元素触发c>代替输入，但是我没有足够的证据来确定这种行为是否是预期的。
 
 
 
由于被替换的元素的性质，我不认为有一种方法来使用CSS修复。我可以想到的唯一的替代方法是使该单元格是一个非替换的元素，例如在你的第一个测试用例中的 div ，并将输入
 
 
 
 
 
 
  .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>字段< / div>< / div>< div class =row> < div class =cell> Label< / div> < div class =cell right>< input type =textvalue =Text input/>< / div>< / div>  
 
 
 
 
I am using display:table with fixed table layout to show some data in a web app.

The table width is set to 100%. There are two columns, and I am explicitly setting a width on the second column. According to the spec, after the column widths are calculated, "if the table is wider than the columns, the extra space should be distributed over the columns."

However this does not seem to be working as expected when the second column is an input element. In this case, the second column retains the specified width and the first column takes 50% of the table. The extra space is not distributed over the columns, and thus the table does not fill the available width.

Here's an example; first test works as expected, second one doesn't:



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





Am I missing something? Why is this happening, and how can I fix it?
解决方案
I don't think you're missing anything. The behavior you're observing is consistent across browsers, but I can't find anything in the spec that alludes to this behavior. I thought it might have something to do with replaced elements, but in fact the spec 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.
So it looks like there shouldn't be any difference in how the table is rendered. Honestly, I don't know. I could go so far as to say that every browser is getting tripped up by the presence of replaced elements, as the same behavior occurs when you use an img in lieu of an input, but I don't have enough proof to say for certain whether or not this behavior is expected.

Due to the nature of replaced elements, I don't think there is a way to fix this using just CSS. The only alternative that I can think of is to make that cell a non-replaced element such as a div in your first test case, and put the input in the non-replaced element.



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





                        
这篇关于固定表布局不填充指定表宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！