Why are fixed table-layout td words not wrapping?

Question

I have a table that is being populated with different lengths of text. I have set the table-layout css property to fixed because it keeps pushing the table outside it's parent creating a horizontal scrollbar.

I want my td's to be exactly half of the table which will be full size of it's parent. I want my text to wrap inside the td's. Here is what it looks like:

I want the text to wrap around 20 so it doesn't overlap the other text. I can't use a <br />.

Here is a JSFiddle of the problem.

Answer 1

You could use word-wrap: break-word on the p. It worked in your jsFiddle, and it's compatible with IE as Microsoft developed it.

Answer 2

The reason that it is not breaking is because there is no spaces in the string. As soon as you add a space to the set of numbers it breaks. Therefore, one way to fix that would be to assign word-wrap:break-work to the p selector.