2

I have a web page that shows lots of tabular data and each of these tables needs to be placed on one horizontal line. I have mocked up an example below:

<html>
<style>
  .outer{width:300px;height:300px;overflow: scroll;}
  .inner{white-space: nowrap;}
  .inline{float: left;}
</style>
<body>
<div class="outer">
    <div class="inner">
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
    </div>
</div>
</body>
</html>

I am having problems that the inner div wraps the table divs unless I set it to have a large width such as 4000px. Is there a nice way of keeping all of the tables inline even if they exceed the size of the outer div with just css?

3
  • You're going to have to give more examples here. What is the inner div you're talking about? What are "the items"?
    – Welbog
    Mar 20, 2009 at 16:57
  • I have tried to make this more clear.
    – bobwah
    Mar 20, 2009 at 22:16
  • Is it just when "stuff" is exceptionally long, or always wrapping? Mar 21, 2009 at 2:08

4 Answers 4

2

Change .inline{float: left;} to .inline{display:inline-block;}

http://jsfiddle.net/QLe5r/

2

Us this property:

white-space:nowrap;
1
  • yeah i tried this but they still wrap. Not sure if I made all of the divs that contain tables to be inline though so will have a quick go at this and see if it helps.
    – bobwah
    Mar 20, 2009 at 17:11
0

This is because the float: left on divs "inline". Instead uses display: inline-block, (and display: inline for IE, I think. Check).

1
  • works in firefox but not in ie and this was for ie6 - was nearly two years ago though so not too worried about it anymore ;)
    – bobwah
    Feb 23, 2011 at 20:42
-2

Why on EARTH do you have tons of tables inside tons of divs?!? That defeats the purpose of using tables for tabular data...when you are doing tabular data you should just use tables...not apply useless combinations.

Simply use one table and use <td>stuff</td> each time you have more data to add...td's are horizontal based anyway so you wouldn't even have to bother with css to have it extend.

1
  • 1
    I was creating server racks and displaying a whole row of servers. I guess these should all be div data but I had built the original (showing one at a time) using tables for ease.
    – bobwah
    Aug 14, 2009 at 16:15

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.