How to prevent HTML tables from becoming too wide
The layout model of tables differ from that of block level elements in that they will normally expand beyond their specified width to make their contents fit. At first that may sound like a good thing—and it often is—but it makes it possible for oversized content to make text unreadable or completely break a site’s layout, especially in Internet Explorer.
This happened to me recently when a client’s legacy content, which contains some layout tables, was injected into the CSS-based layout I had built. It worked well in most cases, but some of the old documents have very long URLs that the browser can’t break. I needed to find a solution to that problem.
View Example 1 to see what I mean. Not very pretty.
Your first instinct is probably to do what I did: start hacking away at the CSS. How about giving overflow:hidden a try? Nope, nothing happens. What if I give the table a different width? No, it doesn’t budge. But there is a solution.
The trick is to use the CSS property table-layout. It can take three values: auto, fixed, and inherit. The normal (initial) value is auto, which means that the table width is given by its columns and any borders. In other words, it expands if necessary.
What you want to use is table-layout:fixed. Bam! Now the table is as wide as you have specified in the CSS. No more, no less. And to my great surprise this seems to be widely supported by browsers. The only browser of any significance that does not support it is IE/Mac, and the significance of that browser is rapidly approaching zero. Check it out for yourself in Example 2.
Next is deciding what to do with the content that doesn’t fit in the table anymore. If the table only contains text, word-wrap:break-word (word-wrap is specified in the CSS3 Text Effects Module) will force the browser to break words as necessary to prevent overflow. The result can be seen in Example 3.
Unfortunately that currently only works in IE/Win, Safari, and Shiira (imagine that… IE/Win, even version 6, is ahead of Firefox in supporting a CSS property).
A compromise is needed for the browsers that don’t support word-wrap. The choices are to either let the content overflow and collide with the other stuff on the page, or to use overflow:hidden to hide it. Which solution is more appropriate will vary from case to case. I went with overflow:hidden, the effect of which you can see in Example 4.
Sorry if this is old news to some of you, but since I only recently discovered this very useful property I thought it would be worthy of a quick write-up.
Update (2007-04-26): Ok, I’ve done some quick testing with overflow:auto. The only browser that handles it properly is Safari (and others based on WebKit). It acts exactly as you would expect it to when setting overflow:auto on table tells, only displaying a horizontal scrollbar when it is needed. In the others either nothing at all happened or things went completely mad.
In other words browser support doesn’t seem to be there for overflow:auto to be a real option.
I also tested overflow:hidden on table cells with over-wide content in other columns than the last one, and noticed no problems anywhere, so that option seems pretty safe.
Update (2009-08-25): Firefox 3.5 now supports word-wrap:break-word and displays Example 3 the same as Safari and IE.
- Previous post: Unobtrusive and keyboard accessible connected select boxes
- Next post: Browsers will treat all versions of HTML as HTML 5