Why does my html table 'max-width' not cause text to wrap?

44
votes

I have an html table and one column (or <td>) contains very long words. I want to set the max-width of the column so that if text is longer than the max-width the text should auto-wrap to next line. I have tried to set the css max-width style on the appropriate <td> element with "max-width:100px", but it does not work. The text is still very long and does not auto-wrap to next line.

Any ideas what is wrong or any solution reference code? I am using IE 8 on Windows 7.

4
htmlcss
As specified in css 2.1 specification: "In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined." - Frédéric

4 Answers

42
votes

You need to add the CSS3 property word-wrap: break-word;.

7
votes

You can put a div inside your table cells.

Nothing within that div will stretch out the table cell.

Works great in IE8 and Chrome at least.

2
votes

Old html td width will work in IE 8 for that... But you want maximum-width, not a width... besides the extra html attribute needed for each cell.

1
votes
<td nowrap="wrap" style="width:100px;"></td>

All browsers..

Unfortunately you have to handle each cells content to keep the whole table fixed width. There is a width attribute for but it doesn't control anything..