Force float left with no line break no matter what

Question

I'm guessing this isn't possible, but here goes.

I have two tables, and I'm trying to get them to sit side-by-side so that they look like one table. The reason for this, instead of using one larger table, is that the data in the second table needs to be handled on a column basis, not row basis, for performance reasons like caching and AJAX-fetching data. So rather than have to reload the whole table for a single column, I decided to break the column out into a separate table, but have it visually seem like a single table.

I can't find a way to forcibly put the second table next to the first. I can float them, but when the first table is too wide, the second one breaks to the next line. Here's the kicker: the width of the first table is dynamic. So I can't just set a huge width to their container. Well, I could set a huge width, like 1000%, but then I have a huge ugly horizontal scroll bar.

So is there any way to tell the second table "Stay on that same line, no matter what! And line up right next to the previous element please!"

Answer 1

Put your two tables in another table with a single row and two cells. Not elegant or 'modern' but it will work.

Answer 2

How about this:

<div>
<div class=lspacer>
<table1>
</table1>
</div>
<div class=rspacer>
<table2>
</table2>
</div>
</div>

Then, for lspacer, you can clear it left, and for rspacer, you can clear it right. Also, you specify the width.