Forced float left without line break no matter what

Question

I suppose this is impossible, but here it goes.

I have two tables, and I'm trying to make them 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 should be column-based rather than row-based, for performance reasons such as caching and AJAX sample data. Therefore, instead of reloading the entire table for one column, I decided to split the column into a separate table, but visually it looks like a separate table.

I cannot find a way to force the second table next to the first. I can swim them, but when the first table is too wide, the second jumps to the next row. Here's the kicker: the width of the first table is dynamic. So I can’t just set a huge width in my container. Well, I could set a huge width, for example, 1000%, but then I have a huge ugly horizontal scrollbar.

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

Answer 1

Place two tables in another table with one row and two cells. Not elegant or “modern,” but it will work.

Answer 2

If your table is one table, you should stick to one table.

You are trying to fix a data management problem using a different document structure.

Using a different class for each column using the DOM navigation tools provided by the library, such as jquery, should not have problems accessing the cells or columns that you want to update.

I would not go on your chosen route.

Answer 3

How about this:

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

Then, for lspacer, you can clear it to the left, and for rspacer you can clear it. You also specify the width.