Word-wrapping A Long Table Cell While Maintaining Dynamic Widths In Others

I have a table which has a long line in one of its cells. I need the long line to be split so that it doesn't cause the table to be more than 100% wide. I found that by adding tabl

Solution 1:

According to the official specification, when you use a fixed table-layout, the first row's column widths determine the entire table's column widths. If none of them are defined, it will distribute the column widths evenly.

Since there doesn't seem to be any other option, I ended up using the following method:

1. Loading the data in the table while the table-layout is set to auto.
2. Reading the width of the columns I want to be dynamic.
3. Setting those column widths to their current values.
4. Changing the table-layout to fixed.

Here's an example which isn't perfect (the width gets decreased by a bit):

http://jsfiddle.net/RYdLd/7/

Solution 2:

I discovered this while wrestling with the same problem:

Setting break-word on an element corresponds exactly to inserting a zero-width space between every character of the text contained inside that element.

Except that this actually works with normal, dynamic tables!

This solution is very fast, since it does not require any Javascript.

(It could however be used from Javascript if desired. Find all cells with break-word, grab all the child text nodes, and insert a zero-width space between every character. Even then, the script would run only once during page load, so this should still be extremely performant.)

Zero-width space is ​

Solution 3:

You can use: word-wrap css style to break the long sentences.

word-wrap: break-word

Solution 4:

It's easy to handle/wrap long words in DIVs and fixed tables (table-layout:fixed) - just apply CSS3 word-wrap:break-words.

Within dynamic tables above property does only half of the work. We need additionally to help the browsers find break points.

A bit more detailed explanation can be found in the article Wrap long words within dynamic tables.