CSS 表格强制换行

Question

我有一个基于 CSS 的三列表格布局。该表格旨在将前两列压缩到相对于填充它们的内容的最小宽度，以便第三列可以填充大部分 View 。听起来很简单吧？好吧，第三列一直给我带来麻烦。

该表格是 Webkit(基于 Safari)应用程序的一部分，无论调整大小如何，它都会填充给定窗口的整个宽度。因此，没有定义默认宽度。因此，当涉及到包装文本 block (例如 URL)或只是简单的重复字符垃圾邮件时，它只是继续而不进行包装。

我知道“word-wrap: break-word;”选项，但这不起作用，因为除非我知道 child 的宽度，否则我无法定义宽度。我也试过“断字:全部中断；” — 这行得通，但在可以合法地从空格中删除的单词中间看到换行并不吸引人。

有没有人知道纯 HTML 和 CSS 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/