Table with 'auto-sizing' columns

What I want

A table with multiple columns. The text in each column may be longer than the width of a particular column, and I want the text to truncate as appropriate. Possible solutions:

1. Trim the text strings server side
   • Pros: Pretty easy to do. Works regardless of browser
   • Cons: You have to assume screen width (window width really) and font and users 'text-size' setting. Once it's sent, it's sent. If the user resizes the window, they don't see any more
2. Trim the text strings client side with JS
   • Pros: Can alter based on current window size. Needs JS, but not too complex
   • Cons: Slow. Still can't get 100% correct based on font, font-size, text-size settings. Either have to have everything in 'hidden' and then display with onload event, or show up front, and then watch screen re-adjust as text strings are timmed after page loads
3. Use some CSS to try and make it work automatically
   • Pros: Should be able to make it 'just work' pefectly and perform reasonably well
   • Cons: Patchy CSS support. Back to lots of different hacks for different browsers. Uggg

CSS Examples

Below are some examples I tried out using div sections and CSS. I tested each one on:

• IE 6.0 SP1
• Moz 1.6b
• Opera 7.2

table

Thanks to Bruno Fassino for this solution which works in IE, Moz and O7. I've removed all my previous non-working solutions now.