html – 表格列宽与包含数据一样窄吗？

发布时间：2020-12-14 18:31:07 所属栏目：资源来源：网络整理

导读：我有三列.我想要的最后两个与它们包含的数据一样窄,第一列可以取宽度的其余部分(表的宽度为100％). 你怎么能用CSS做到这一点？现在右边的列看起来很傻,有额外的空间.想法？解决方法只需给第一列宽度为100％,并在必要时为所有其他列中的单元格提供一个空格

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

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

解决方法

只需给第一列宽度为100％,并在必要时为所有其他列中的单元格提供一个空格：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”)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!