html - 表格列宽与包含的数据一样窄？

Question

我有三列。最后两个我想使其与它们包含的数据一样窄，第一列可以占据其余的宽度(表格有 100% 的宽度)。

如何使用 CSS 做到这一点？现在右边的列看起来很傻，有额外的空间。想法？

Answer 1

只需为第一列指定 100% 的宽度，如有必要，为所有其他列的单元格指定 white-space: nowrap以避免他们的内容被包装(同样，仅在必要时)。

例如

<table>
    <tr><td class="first">first</td><td>second</td><td>third</td></tr>
    <tr><td class="first">first</td><td>second</td><td>third</td></tr>
    <tr><td class="first">first</td><td>second</td><td>third</td></tr>
</table>

与

table { width: 100%; }
table td.first { width: 100%; }

或者如果您不关心 IE6 用户，则采用现代方式:

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

(以便您可以删除 class="first")