Using overflow:hidden in tables

Until today, I never used the CSS properties overflow: hidden and white-space: nowrap on table cells. I always thought it was useless, since it never seemed to work for me. As a disclaimer, I am not a CSS guru. In fact, CSS is probably where I am least knowledgable in web development.

Fortunately, I ran across the table-layout: fixed property on the W3 website. This changes the table algorithm to just take into account the table cell width. All that is required is the table have a width defined. As with most great web development breakthroughs, it isn’t fully supported in IE.

In order to get IE to work, there is one small trick that must be used. All data inside the table cells must have all spaces converted to  . This will prevent a nasty IE bug of wrapping even though the nowrap property was used.

Thanks to this article for helping me figure out how to put all the CSS together.