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

第一个单元是根据内容
其他细胞符合表的其余部分（超过两个内容广泛的共同收缩）

例子：

<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％”或类似的东西。

来源

2012-07-10 Pavel S.

设置宽度为10px ....例如， ' foo' – 2012-07-10 12:35:27

嗯，这是在我的文章的底部。我不知道单元格的宽度，所以我不能手动设置它。我需要浏览器缩小内容（在我的例子中是“foo”，但它可能是“foooooooooo”，这对于10px来说太长了）。 – 2012-07-10 12:36:36

即使设置了10px的宽度，单元格也会根据内容增长。在这里可以看到小提琴：http://jsfiddle.net/7X4XT/2/ – 2012-07-10 12:45:04

您可以在第二单元的width设置为100%

HTML：

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

CSS：

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

检查this fiddle出来。

来源

2012-07-10 13:12:21 scumah

+15

这只适用于桌子上的table-layout设置为auto的情况。这是默认设置，但通常将'table-layout'设置为'fixed'，这会导致100％的值按照字面顺序进行（单元格将跨越整个表格，并且所有单元格将重叠）。 – Zenexer 2013-10-08 05:05:04

如果该表的总大小为500像素且不能通过，则将td{max-width: 500px;};如果最小值是500像素，td {min-width: 500px;};看看这个exemple。

来源

2012-07-10 12:45:21

设置

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

它将解决乌尔问题..

来源

2015-02-25 10:49:08

我知道这是几年前问。 OP现在可能已经解决了它。但这对某人仍然有帮助。所以我发布了对我有用的东西。这是我对我的做法。我将宽度设置为接近零的任何东西，将其缩小，然后将白色空间设置为nowrap。解决了。

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

来源

2017-04-25 15:34:24

谢谢。（+ 8个字符） – Andrew 2017-05-08 15:09:53

谢谢！有趣的是，'0'的宽度没有任何影响，但是你的'0.1％'似乎是一个很好的解决方法。亲自去了 – 2017-06-09 01:31:48

，我用width：1px去了。好主意Nat！ – SnailCoil 2017-07-21 17:51:31

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

回答

相关问题