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

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%; }​

检查this fiddle。

Answer 2

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

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

Answer 3

组

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

它会解决你的问题..

Answer 4

如果表的总大小为500像素且无法通过，则放td{max-width: 500px;};如果最小值为500像素，td {min-width: 500px;};看看这个exemple。