如何根據內容使表格單元縮小？

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

這將解決您的問題。

Answer 4

如果表格的總大小為500像素且無法通過，請輸入td{max-width: 500px;} ; 如果最小值是500像素，則td {min-width: 500px;} ; 看這個例子 。