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

Question

如何使包含2列(单元格)的表格如下所示:

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

例:

<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%"或类似的东西.

Answer 1

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

HTML:

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

CSS:

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

检查这个小提琴.

Answer 2

我知道这是几年前被问过的.OP现在可能已经解决了.但这对某人来说仍然有用.所以我发布了对我有用的东西.这就是我对我的所作所为.我将宽度设置为接近零,将其缩小,然后将白色空间设置为nowrap.解决了.

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

Answer 3

设置此：

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

这样可以解决您的问题。