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

Question

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

在HTML中，这会自动发生在表格中，当每个单元格都有一个文本div时，请参见此处的第一个表格： http://tora.us.fm/_script/demotables.html

但是，当单元格包含多个div时，这不再起作用，请参见第二个表格。最左边的柱子非常窄而高，而不是更宽更短。

在最左侧的列中添加“width”属性（通过单击按钮）可显示预期结果。但是，我事先并不知道哪个列应该是什么宽度。

是否可以自动调整？

jsfiddle：http://jsfiddle.net/erelsgl/RJa2k/5/

Answer 1

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

Answer 2

在我的朋友Eden Erez的帮助下，我找到了一个部分解决问题的黑客：

• 在每个TD中，第二次打印内容 - 在特殊div中，如下所示：

  < td >
   < div class='autowidth' >
       $content
   < /div >
   $content
  < /td >
  

• 在样式表中，插入：

  .autowidth {visibility:hidden;}
  .autowidth * {display:inline;}
  

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

在大多数情况下，这种效果非常好。