如何使表格单元格根据内容收缩？

我如何使两列(单元格)的表看起来像下面这样:

第一个单元格根据内容收缩
另一个单元格适合表的其余部分(比两个内容的总和宽)

例如:

<table style="width: 500px;">
<tr>
<td>foo</td>
<td>bar</td>
</tr>
</table>

我要把桌子弄成这样:

.___________________________________________________________________________.
| foo | bar            <a lot of space here>                                |
|_____|_____________________________________________________________________|
500 px total width

注意: 我不知道“ foo”的宽度，所以我不能设置“50px”，“10%”或类似的东西。

92486 次浏览

小开

如果表的总大小是500像素并且不会通过，那么放入 td{max-width: 500px;}; 如果最小值是500像素，那么放入 td {min-width: 500px;}; 看看这个例子。

小开

最佳答案

您可以将第二个单元格的 width设置为 100%

HTML:

<table>
<tr>
<td>foo</td>
<td class="grow">bar</td>
</tr>
</table>

CSS:

table { width: 500px; }
.grow { width: 100%; }

看看这把小提琴。

小开

设置如下:

td {
max-width:100%;
white-space:nowrap;
}

这能解决你的问题。

小开

将宽度设置为接近零的任何值，以缩小它，然后将空白设置为 nowrap。解决。

td {
width:0.1%;
white-space: nowrap;
}