html列，其宽度根据其内容自动更改 [英] html columns whose width automatically changes according to their content
问题描述
我创建了具有3列的动态HTML网页。每列可以包含可变数量的文本 - 从0到1000个字。我想要3列中的文本大致相同的高度。
I create dynamic HTML pages with 3 columns. Each column can contain a variable amount of text - from 0 to 1000 words. I want the text in the 3 columns look approximately the same height. So, I want to have the column widths change automatically according to the amount of text they contain.
在HTML中，这会在表格中自动发生，当每个单元格都有一个单个文本区域，请参阅此处的第一个表格：
http://tora.us。 fm / _script / demotables.html
In HTML, this happens automatically in a table, when each cell has a single div of text, see the first table here: http://tora.us.fm/_script/demotables.html
但是，当单元格包含多个div时，这将不再工作，请参见第二个表。最左边的列非常窄和高，而不是更宽和更短。
However, when the cells contain several divs, this doesn't work anymore, see the second table there. The leftmost column is very narrow and tall, instead of being wider and shorter.
在最左边的列中添加width属性（通过单击按钮）可显示预期的结果。但是，我不提前知道什么列应该是什么宽度。
Adding a "width" attribute to the leftmost column (by clicking the button) shows the expected result. However, I do not know in advance what column should be what width.
是否可以自动调整？
推荐答案
在我的朋友Eden Erez的帮助下，我发现了一个部分解决问题的黑客：
With the help of my friend, Eden Erez, I found a hack that partly solves the problem:
-
在每个TD中，再次打印内容 - 在特殊div中，如下所示：
In each TD, print the content a second time - inside a special div, like this:
td>
< div class ='autowidth'>
$ content
< / div>
$ content
< / td>
< td > < div class='autowidth' > $content < /div > $content < /td >
在样式表中，插入：
.autowidth {visibility： }
.autowidth * {display：inline;}
.autowidth {visibility:hidden;} .autowidth * {display:inline;}
在某些情况下，浏览器将列宽设置为单段落，但仍显示为多段。请参见示例：
http://jsfiddle.net/erelsgl/RJa2k/76/
In some of the cases, this will make the browser set the column widths as though they are single-paragraph, but still display them as multi-paragraph. See an example here: http://jsfiddle.net/erelsgl/RJa2k/76/
这在大多数情况下效果非常好。
This works surprisingly good in most cases.
这篇关于html列，其宽度根据其内容自动更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
