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?