html - 只有一个适配列的固定宽度 HTML 表格

Question

如何制作一个 HTML 双列表格，其中第一列仅采用所需的宽度，而第二列填充到固定的总表格宽度？因此，如果不为第一列分配固定宽度，则更改第二列内容不会重新平衡第一列和第二列之间的空间。

Answer 1

你可以使用

td:first-child + td { width: 100%; }

在 CSS 中。这适用于现代浏览器。旧版本的 IE(直到 IE 6)不理解这里使用的“高级”选择器；对于他们，您可以使用

<col><col width="100%">

在 HTML 中(它对现代浏览器无害)，在 <table> 之后标记和表格行之前。

如果一个单元格包含空格或者可能被分成两行或多行，那么“它需要的宽度”这个概念就有些模糊了。如果“foo”和“bar”要保持在同一行，则带有“foo bar”的单元格需要更多空间。默认情况下，浏览器可能会拆分它们。你可以在 CSS 中通过说

来防止这种情况

td:first-child { white-space: nowrap; }