只有一个自适应列的固定宽度HTML表格

Question

3

如何制作一个 HTML 两列表格，使得第一列仅占用其所需宽度，而第二列填充至固定的总表格宽度？这样，在不为第一列分配固定宽度的情况下，更改第二列内容时不会重新平衡第一和第二列之间的空间。

- dronus

2个回答

2

只需添加 < /p>

style="width: 100%"

将要扩展的表格单元格。

- jmacinnes

好的，是否有不修改表列本身的解决方案？比如通过CSS或<col ...>标签进行操作... - dronus

类似于'<col style="white-space:nowrap;"> <col style="width: 100%;">'这样的东西听起来很酷，但不幸的是，在Chrome浏览器上nowrap属性无法正常工作。 - dronus

white-space: nowrap 在 Chrome 中有效。也许仅在 COL 标签上不起作用。将其应用于 TD。 - jmacinnes

我认为COL可以接受任何选项来应用于整个TD列。有点遗憾的是它并不是这样，这将非常有用。要将其应用于TD，我必须在每个TD上膨胀HTML并添加类名属性。 - dronus

哦，刚看到Jukka的答案，其中包含了一个没有类名属性的CSS解决方案。 - dronus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jukka K. Korpela · Accepted Answer

您可以使用

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; }