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收集了一些其他示例。

我的问题：

为什么会发生这种情况（例如，为什么这些列甚至不是？）？
即使我不知道给定表格的列数是多少，我是否可以保持大小均匀的单元格，无论其内容如何？

Answer 1

您让浏览器确定宽度，它会将较小的宽度折叠为包含元素的最小尺寸。如果你想让所有东西都相等，请在你的桌子上设置table-layout: fixed。

这将为您分配接近均匀的列。

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

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

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


一个列元素，其值不是＆＃39; auto＆＃39;对于宽度＆＃39; property设置该列的宽度。

否则，第一行中的单元格的值不是＆＃39; auto＆＃39;   对于宽度＆＃39; property确定该列的宽度。如果   单元格跨越多个列，宽度分为多个   列。

任何剩余的列均等地划分剩余的水平表   空格（减去边框或单元格间距）。

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

列宽如下确定：


计算每个单元格的最小内容宽度（MCW）：   格式化的内容可能跨越任意数量的行但可能不会溢出   细胞盒。如果指定宽度＆＃39; （W）细胞更大   与MCW相比，W是最小单元宽度。值为＆＃39; auto＆＃39;意思是   MCW是最小单元宽度。   另外，计算＆＃34;最大值＆＃34;每个单元格的单元格宽度：格式化   内容不会破坏除明确行之外的行   发生了休息。

对于每列，确定最大和最小列宽   仅跨越该列的单元格。最低要求是   由具有最大单元格宽度（或列）的单元格   ＆＃39;宽度＆＃39;，以较大者为准）。最大值是   最大单元格宽度最大的单元格（或列宽度＆＃39;，   以较大者为准。）

对于跨越多列的每个单元格，请增加最小值   它跨越的列的宽度，使它们在一起，至少是它们   和细胞一样宽。对最大宽度执行相同操作。如果   可能，扩大所有跨越的列大致相同   量。

对于宽度为＆＃39;的每个列组元素。除了＆＃39; auto＆＃39;，   增加它跨越的列的最小宽度，这样   它们至少与列组的宽度一样宽。＆＃39;

Answer 2

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

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

100％宽度的元素呈现不同

2 个答案: