CSS表强制环绕

Question

我有一个三列CSS的表格布局。该表设计为将前两列压缩到相对于填充它们的内容的最小宽度，以便第三列可以填充大部分视图。听起来很简单吧？那么，第三列不断给我带来麻烦。

该表是基于Webkit（基于Safari的）应用程序的一部分，它的内置填充窗口的整个宽度可以使其无论调整大小多少。因此，没有定义默认宽度。因此，当涉及到包装诸如URL之类的文本块或者仅仅是简单的重复字符垃圾邮件时，它就会继续进行而不用换行。

我知道“文字包装：打破词;”选项，但这不起作用，因为我不能定义宽度，除非我知道孩子的宽度。我也尝试过“断字：全部打破”; - 这是有效的，但是在一个合理地可以从空间中切出的词的中间看到一个包裹并不是很吸引人。

是否有人知道纯HTMLCSS 3解决方案有两个子框和第三个可以包装长文本而不必使用JavaScript或其他方式？布局和代码的

例子：

-------------------------------------------------------------------------------------------- 
| Width Matches Largest Cell of Column | Same for Second |  Fill All Available Space | 
-------------------------------------------------------------------------------------------- 
| Width Matches Largest Cell of Column | Same for Second |  Fill All Available Space | 
-------------------------------------------------------------------------------------------- 

<div class="table_class"> 
<div class="table_row"> 
<div class="cell1">data</div> 
<div class="cell2">data</div> 
<div class="cell3">datadatadatadata…</div> 
</div> 
</div> 

Answer 1

如果你显示表格数据，并试图让你的div看起来像一个表，为什么不使用一个表？它们被设计成具有的行为类型你描述：

http://jsfiddle.net/Mk7jS/1/

Answer 2

被用于表格数据此表布局？因为在这种情况下，您应该使用表。

原因表坏是当他们用于图形布局。他们打破了网站的semantic design。但是，如果内容是表格，那么你应该使用表格。他们已经很好地解决了布局行和列的问题。

或者，如果需要保留div布局，则可以使用table, table-row, and table-cell显示属性。