Webmasters Stack Exchange is a question and answer site for pro webmasters. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question

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: http://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.

share|improve this answer
    
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 Dec 20 '10 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?

share|improve this answer
    
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 Dec 13 '10 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 – Stephan Muller Dec 13 '10 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 Dec 13 '10 at 12:20
    
new question at stackoverflow – Peter V. Mørch Dec 13 '10 at 23:36

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.