使单元格宽度与内容相匹配?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (75)

给定以下标记,如何使用CSS强制一个单元格(列中的所有单元格)与其内内容的宽度相匹配?

<style type="text/css">
td.block
{
border: 1px solid black;
}
</style>
<table style="width: 100%;">
<tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
</tr>
</table>
提问于
用户回答回答于

设置

max-width:100%;
white-space:nowrap;

会解决你的问题。

用户回答回答于

可以看下这个方法:

HTML:

<table style="width: 100%;">
<tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
</tr>
</table>

CSS:

td{
    border:1px solid #000;
}

tr td:last-child{
    width:1%;
    white-space:nowrap;
}

扫码关注云+社区

领取腾讯云代金券