A more complex version of: Word-wrap in an HTML table(link is external).
I'm trying to create a nice mobile version of my table. I'm using bootstrap media-queries to apply two CSS rules:
display:table-row;- This puts each cell on a new row.word-wrap:break-word;- This makes long words go over multiple lines.
The trouble is that these two rules seem to conflict. When I use display:table-row;, the text does not wrap. Removing display:table-row; causes text to wrap again.
Is there any way I can use both display:table-row; and word-wrap:break-word;?
jsfiddle with code: http://jsfiddle.net/q46Vd/(link is external)