使用display：table-row在HTML表格中自動換行

Question

更復雜的版本： 在HTML表中自動換行 。

我正在嘗試為表格創建一個不錯的移動版本。 我正在使用引導媒體查詢來應用兩個CSS規則：

1. display:table-row; -這會將每個單元格放在新行上。
2. word-wrap:break-word; -這使長單詞跨越多行。

問題在於這兩個規則似乎沖突。 當我使用display:table-row; ，文字不會自動換行。 刪除display:table-row; 使文本再次換行。

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

帶有代碼的jsfiddle： http ： //jsfiddle.net/q46Vd/

Answer 1

嘗試word-break: break-word而不是word-wrap: break-word 。

Answer 2

解決了。 我用display:block替換了display:table-row 。

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