Multiple tables on one line

I wish to display multiple tables on one line, next to each other. This could be achieved using tables, but I want to avoid this is possible:

<table>
<tr>
<td>
<table>
<!--Table data-->
</table>
</td>
<td>
<table>
<!--Table data-->
</table>
</td>
<td>
<table>
<!--Table data-->
</table>
</td>
</tr>
</table>

I considered using display:inline, but the tables are bordered, and this caused display issues with the border as they only bordered one line.

Is there a solution to this problem using CSS? If it matters, the tables are within a DIV. In one case, there are two tables I wish to go alongside one another, in another, there are three.

For the border you may want to look at using border-collapse:collapse on the table.

Tried that, it messed up the cells and for some of the tables the border was still just bordering one line, although in others it was bordering the whole thing - with messed up cells passing over the edges of the border.

Why not try floats?

Just give each individual table a set width, then use css to float 'em left?

As long as your width values are correct, the tables should stack neatly side by side.

Kind regards,

Gary

So something like:

<table style="width:33%;float:left">
<!--Content-->
<table style="width:50px;float:left">
<!--Content-->
<table style="width:30px;float:left">

EDIT: That doesn't seem to work.

Can anyone help? :o