100％宽度渲染的元素​​

Question

我正在布置一个表格（是的，表格数据！），我无法理解如何确定表格单元格的宽度。对于具有100％宽度的<table>和两个空的<td>单元，每个单元将占用一半的空间。在<td>中添加不同的元素后，情况就会改变。但是，<td>的子元素都具有100％的宽度。我不希望这会改变单元格的宽度，但它确实如此。

例如，两个小区在下面的代码具有不同的宽度：

<table> 
    <tbody> 
     <tr> 
      <td> 
       <div>100%</div> 
      </td> 
      <td> 
       <input placeholder="other" type="text" /> 
      </td> 
     </tr> 
    </tbody> 
</table> 

我收集在这个jsfiddle几个其他示例。

我的问题（一个或多个）：

1. 这究竟是为什么（例如为什么没有列甚至？）？
2. 即使我不知道给定表格有多少列，我是否可以保持均匀大小的单元格而不考虑它们的内容？

Answer 1

您正在让浏览器确定宽度，它会将包含的元素的较小值缩小为最小值。如果你想让你的表CSS中的所有东西都等于table-layout: fixed。

这会将列均匀分配给您。

http://jsfiddle.net/Jqqd9/6/

http://www.w3.org/TR/CSS21/tables.html#propdef-table-layout

在固定表格布局算法中，每个列的宽度是 确定如下：

1. 与除“auto以外的值的列元素'为'width'属性设置该列的宽度。
2. 否则，'width'属性'auto' 以外的第一行中的单元格将确定该列的宽度。如果 单元格跨越多个列，则将宽度分为 列。
3. 任何剩余的列等分剩余的水平表格 空间（减去边框或单元格间距）。

默认值是auto，以这种方式找到。

列宽被确定如下：

1. 计算每个单元格的最小内容宽度（MCW）：所述 格式化的内容可以跨越任何数量的行，但可能不会溢出 的电池箱。如果单元的指定“宽度”（W）比MCW大 ，则W是最小单元宽度。'auto'的值表示 MCW是最小单元宽度。 另外，计算每个单元格的“最大”单元格宽度：格式化 除了显式行 中断发生之外没有断开行的内容。
2. 对于每一列，请确定仅跨越该列的单元格的最大和最小列宽度 。最小值是具有最大最小单元宽度的单元所需的 （或者列宽为 '宽度'，取较大者）。最大值是 单元格所具有的最大单元格宽度（或列'宽度'， 中较大者）所需的最大值。
3. 对于跨越多个列的每个单元格，增加它跨越的列的最小宽度，以使它们一起至少与单元格一样宽度为 。对最大宽度做同样的操作。如果 可能，则将所有跨列扩大约相同数量的 数量。
4. 对于“宽度”不是“auto”的每个列组元素， 会增加其跨越的列的最小宽度，因此它们至少与列组的宽度一样宽。

Answer 2

你可以简单的使用table-layout:fixed CSS属性来解决这个问题， 这里是解决方案。

http://jsfiddle.net/hbirjand/HWhp6/