使用display：table-row在HTML表格中自动换行

Question

更复杂的版本：Word-wrap in an HTML table。

我正在尝试创建一个漂亮的移动版本的表格。我正在使用bootstrap media-queries来应用两个CSS规则：

1. display:table-row; - 这会将每个单元格放在一个新行上。
2. word-wrap:break-word; - 这使得长词会超过多行。

麻烦在于这两条规则似乎有冲突。当我使用display:table-row;时，文本不会换行。删除display:table-row;会导致文本再次换行。

我有什么方法可以同时使用display:table-row;和word-wrap:break-word;？

jsfiddle with code：http://jsfiddle.net/q46Vd/

Answer 1

尝试使用word-break: break-word代替word-wrap: break-word。

Answer 2

解决了它。我将display:table-row替换为display:block。

http://jsfiddle.net/q46Vd/1/