HTML表格，固定宽度自动调整列

Question

是否可以使用

table-layout: fixed;
width: 100%;

在一张桌子上，如果没有设置为固定，那么列的自动调整大小最适合内容吗？

该表需要设置为固定，因此宽度不会超过其父级。

或者换句话说：

是否可以使用table-layout：auto，但设置一个最大宽度，即使表中没有空格的长字符串也会遵守该宽度。

Answer 1

不，你不能将两个不同的table layout modes结合起来。在自动布局（table-layout: auto，默认值）中，浏览器选择列宽，以便对单元格中的所有内容都足够大;您所做的任何宽度设置都将被视为最小宽度，这可能会使列比其他方式更宽。这也意味着在必要时将超出该表的任何宽度设置。在固定布局（table-layout: fixed）中，根本不考虑单元格内容。将使用指定的宽度，或者在没有宽度设置的情况下，将总宽度均匀分配到列。

结论是，当您需要自动布局或“最佳匹配”，但不希望超出某个给定限制时，您需要确保列宽要求的总和不超过它。例如，如果您有一个没有空格的长字符串，请考虑在适当的位置插入可选的换行符，例如使用​或<wbr>，如果内容允许中断。

您还可以考虑为单元格的内容设置最大宽度。这不能直接设置（在自动布局中），但可以使用<td><div>...</div></td>并在div上设置约束来完成。如果有例如内容中长不可分割的字符串，默认情况下内容会溢出，但表格单元格仍将具有宽度约束确定的宽度。