Chrome table cells not word wrapping correctly

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

  1. Keep the explicit width defined on the table
  2. Set the css table-layout on the table as:
    table-layout: fixed
  3. 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.

8 thoughts on “Chrome table cells not word wrapping correctly

  1. 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.

  2. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *