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

Posted 2023-03-05

【中文标题】如何使表格单元格根据内容缩小？

【英文标题】：How to make table cell shrink according to the content?

【发布时间】：2012-07-09 22:22:49

【问题描述】：

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

【问题讨论】：

设置一个像 10px 这样的宽度......例如<td width="10">foo</td>

嗯，它就在我帖子的底部。我不知道单元格的宽度，因此无法手动设置。我需要浏览器根据内容缩小（在我的示例中为“foo”，但它可能是“foooooooooo”，对于 10 像素来说太长了）。

即使你设置了10px的宽度，单元格也会根据内容增长。在这里看小提琴：jsfiddle.net/7X4XT/2

【参考方案1】：

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

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

【讨论】：

谢谢！有趣的是，0 的宽度没有任何效果，但您的 0.1% 似乎是实现此目的的好方法。

就我个人而言，我选择了宽度：1px。好主意纳特！

@SnailCoil 当其他列使用的百分比加起来小于 100% 时，1px 不起作用。我的列可以动态隐藏，因此它们不能总是添加到 100%（并且不想重新计算）。 Nat 的回答效果很好，解决了我一年多来的一个问题。

Hacky 但不错的解决方案。谢谢！

为了省去别人的麻烦，这似乎和table-layout: fixed有同样的问题above

【参考方案2】：

可以将第二个单元格的width设置为100%

html：

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

CSS：

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

签出this fiddle。

【讨论】：

这仅在table-layout 设置为auto 时有效。这是默认值，但通常将table-layout 设置为fixed，这将导致 100% 值按字面意思获取（单元格将跨越整个表格，并且所有单元格将重叠）。

当我调整包含 html 输出的小提琴窗口的大小时，它根本不会增长。

将其缩小到内容。不要在第一个单元格上设置宽度！

【参考方案3】：

设置这个：

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

这会解决你的问题。

【讨论】：

紧凑数据的不错解决方案，但如果您碰巧需要更长的内容来包装在一个单元格中，则效果不佳

【参考方案4】：

如果表格总大小为500像素，不通过，放tdmax-width: 500px;；如果最小值为 500 像素，td min-width: 500px;；看看这个exemple。