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

发布时间：2020-12-14 22:22:36 所属栏目：资源来源：网络整理

导读：如何使2列(单元格)的表格如下所示：第一个单元根据内容收缩另一个单元格适合表格的其余部分(宽于两个内容) 例： table style="width: 500px;" tr tdfoo/td tdbar/td /tr/table 我需要桌子看起来像这样： ._______________________________________________

如何使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。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!