In working on my recently released vain routes gem, I came across a frustrating issue getting the table in chrome to word wrap the data in the cells. It was working flawlessly in Firefox and even IE but despite trying several different attempts to make it work; Chrome kept overlapping the text between cells.
I tried several different iterations including explicitly defining the width of the table cells and the table itself. I even set the overflow property to hidden, something I thought would have at least constrained the text from overflowing.
To keep things short, this is what I needed to do
- Keep the explicit width defined on the table
- Set the css table-layout on the table as:
table-layout: fixed
- Set the css word-wrap property on the td element as:
word-wrap: break-word
As a final note, I initially tried using the css word-wrap property for a col element, but for whatever reason it did not take.
Hopefully I’ve helped someone else out there who may be having a similar problem.