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

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

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

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

Answer 2

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

HTML：

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

CSS：

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

检查这个小提琴。

Answer 3

设置这个：

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

这将解决您的问题。

Answer 4

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