Force float left with no line break no matter what

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 firs开发者_开发技巧t 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!"

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

If your table is one table, you should have sticked with one table.

You are trying to fix a data manipulation issue by using a different document structure.

Using a different class per column with the DOM navigation tools provided by library such as jquery, you should not have any problem accessing cells or columns you want to update.

I would not go the route you chose.

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.