表列宽度与包含数据一样窄？

Question

我有三列.我想要的最后两个与它们包含的数据一样窄,第一列可以取宽度的其余部分(表的宽度为100%).

你怎么能用CSS做到这一点？现在,右边的列看起来很傻,有额外的空间.想法？

Answer 1

只需给出第一列a width,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")