On our site we have tables containing data. We like the column widths we get with a normal table, but we like the border-bottom of tds to stretch the entire width of the page like we get with CSS: table { width:100% }, as can be seen on a demo table widths page.

Is it possible to achieve the same column widths as with a normal (non-width-100%) table in a table where the border-bottom stretches the entire width?

Btw, is there a better way (tm) of showing HTML snippets than linking to an external page? I can show just source, but having HTML rendered too is so illustrative.

We need a solution that works in at least IE6-8 + FF.

2 Answers 2


Adding #tableB td { float: left; } will give you the desired effect in current browsers (IE8+, Chrome, Firefox etc). However this does not work in IE7.

You can see an approach offered for dealing with floating td's in conjunction with IE7: https://stackoverflow.com/questions/1018125/ie7-how-to-make-td-float.

Note that the above suggested workaround uses invalid markup to achieve what I believe you're looking to do.

  • Thanks. Yeah I need to support IE6-8 and FF. So also IE7. And the IE7 workaround fixes the column widths, and then we're nowhere... But thanks for the suggestion. I'll edit the description to mention the cross-browser requirement.
    – Peter V. Mørch
    Commented Dec 20, 2010 at 23:29

If you set td { white-space: nowrap } the lines 'Foo Bar' and 'Hello World' will stay intact. Is this what you're after?

  • That doesn't work if the contents of a TD are very long. A "normal" table starts wrapping at some point, whereas td { white-space: nowrap } will never wrap. So no that won't work for us as some td s are very long. What I'm after is the same behaviour as "normal" tables/cells. That wrap under the same conditions.
    – Peter V. Mørch
    Commented Dec 13, 2010 at 10:06
  • Hmm, tough one. I wonder at what exact point a "normal" table starts wrapping, it must be in the specifications somewhere. Maybe you should ask this over at StackOverflow.com Commented Dec 13, 2010 at 10:30
  • Yeah, I was wondering that. Stackoverflow is for "Q&A for professional and enthusiast programmers" and Webmasters is for "Q&A for pro webmasters". I assumed HTML/CSS questions were for Webmasters. But I'll post on Stackoverflow instead. Thanks, Litso!
    – Peter V. Mørch
    Commented Dec 13, 2010 at 12:20
  • new question at stackoverflow
    – Peter V. Mørch
    Commented Dec 13, 2010 at 23:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.