html列的宽度根据其内容自动更改

我使用3列创建动态HTML页面。每列可以包含可变数量的文本 - 从0到1000个单词。我希望3列中的文本看起来大致相同。所以，我想根据它们包含的文本数量自动更改列宽。html列的宽度根据其内容自动更改

在HTML中，这会自动发生在一个表中，当每个单元都有一个单独的文字DIV，看到的第一个表在这里： http://tora.us.fm/_script/demotables.html

然而，当细胞中含有几个div的，这也不行现在看到第二个表格。最左边的列非常窄而高，而不是更宽和更短。

将“width”属性添加到最左边的列（通过单击按钮）显示预期的结果。但是，我不知道什么列应该是什么宽度。

是否可以自动进行调整？

2012-07-18 Erel Segal-Halevi

你可以jsfiddle你的代码？ – mfadel 2012-07-18 08:04:14

我无法真正将您的描述与演示相匹配。我的浏览器在做什么奇怪的事情？我上传了谷歌浏览器http://imageshack.us/f/841/torausfmscriptdemotable.png/所呈现演示的屏幕截图，请确认这是你想看到的内容... – Matthias 2012-07-18 08:10:37

@mfadel Nice site！你是这个意思吗？ http://jsfiddle.net/erelsgl/RJa2k/3/ – 2012-07-18 08:14:07

和我的朋友，伊甸园埃雷兹的帮助下，我找到了一个黑客工具，部分地解决了这个问题：

在每一个TD，打印内容的第二次 - 一个特殊的DIV中，像这样：

< TD> < DIV类= 'autowidth'> $内容 </DIV> $内容 </TD>
在样式表中插入此：

.autowidth {能见度：隐藏;} .autowidth * {显示：内联;}

在某些情况下，这将使浏览器将列宽设置为单段，但仍将其显示为多段。在此处看到一个示例： http://jsfiddle.net/erelsgl/RJa2k/76/

在大多数情况下，这种方法的效果令人惊讶。

来源

2012-08-01 05:30:40

尝试添加到css中td div{white-space: nowrap}或此td div{display: inline}。这是你需要的结果吗？

来源

2012-07-31 06:01:44 Roman

谢谢你告诉我有关我之前不知道的“白色空间”属性。但是，这不是一个通用的解决方案：有时，某些列中的div非常长，我确实希望它们在需要时进行换行。 display：inline也不是解决方案，因为它将所有div放在一行中 - 它完全损坏了显示器...... – 2012-08-01 04:33:02

html列的宽度根据其内容自动更改

回答

相关问题