Html 如何根据内容缩小表格单元格？

如何使包含两列（单元格）的表如下所示：

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

• 第一个单元格根据内容进行收缩
• 另一个单元格适合表格的其余部分（宽度大于两个内容的总和）

例如：

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

福
酒吧

我需要这张桌子看起来像这样：

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

。\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu。
|福巴|
|_____|_____________________________________________________________________|
500像素总宽度

---

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

如果表的总大小为500像素并且不会通过，请将

td{max width:500px；}

；如果最小值为500像素，

td{min width:500px；}

；看这个。

您可以将第二个单元格的

宽度设置为
100%

HTML:

签出。
设置此选项：

td{
最大宽度：100%；
空白：nowrap；
}

这将解决您的问题。
我知道这是多年前提出的问题。OP现在可能已经解决了。但这对某些人还是有帮助的。所以我在发布对我有用的东西。这是我用我的钱做的。我将宽度设置为接近零的任何值，以缩小它，然后将空白设置为nowrap。解决了

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

将宽度设置为10px。。。。e、 g.
foo
嗯，它就在我帖子的底部。我不知道单元格的宽度，因此无法手动设置。我需要浏览器根据内容进行收缩（在我的示例中是“foo”，但可能是“fooooooo”，对于10px来说太长了）。即使您设置了10px的宽度，单元格也会根据内容增长。请参见此处的fiddle：仅当表上的
表格布局
设置为
自动
时，此选项才有效。这是默认设置，但通常会将
表格布局设置为
固定
，这将导致100%的值按字面意思计算（单元格将覆盖整个表格，所有单元格将重叠）。当我调整包含html输出的小提琴窗口的大小时，它根本不会增长。将其缩小到内容。不要在第一个单元格上设置宽度！谢谢有趣的是，
0
的宽度没有任何影响，但是你的
0.1%
似乎是一个很好的方法来实现这一点。好主意，纳特@当其他列使用的百分比总和小于100%时，SNAILCOOL 1px不起作用。我的列可以动态隐藏，因此它们不能总是添加到100%（并且不想重新计算）。Nat的回答非常有效，解决了我一年多以来遇到的一个问题。这是一个简单但很好的解决方案。谢谢对于紧凑型数据来说，这是一个不错的解决方案，但如果您碰巧需要在一个单元格中包装更长的内容，则效果就不太好了
td {
width:0.1%;
white-space: nowrap;
}