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.
Thank you so much. I came across the same problem today and you solution has worked for me too.
This was driving me absolutely bonkers….after many hours of pulling my hair out I stumbled across your solution and it worked. Thanks so much.
FINALLY, i was looking dayzz for this solution !
thank you so much !!
Thank you very much!!! You saved my time.
Thanks for sharing and helping.
again, thank you for this catch. it seems like such a simple thing to expect to happen naturally, or at least for ‘word-wrap’ to handle alone.
Thanks, worked for me
perfect! thank you!!!