html – 根据内容如何使表格缩小?

如何使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%”或类似的东西。

您可以将第二个单元格的宽度设置为100%

HTML:

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

CSS:

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

检查this fiddle

翻译自:https://stackoverflow.com/questions/11413365/how-to-make-table-cell-shrink-according-to-the-content

转载注明原文:html – 根据内容如何使表格缩小?