Tables inline-block/inline-table in IE7 - css

Question

I would like to place two tables next to each other. Since I'm not a big fan of floating or using "css hacks", what approach do you suggest? Is it possible to solve without it, or am I out of luck?

Answer 1

Use table-cell display to get what you are looking for.
For Instance,
The HTML:
<div class="wrap">
<div class="col">ABC</div>
<div class="col">DEF</div>
</div>
The CSS:
.wrap{
width:100%;
display:table;
}
.col{
background:blue;
display:table-cell;
}
WORKING DEMO
EDIT:
If you want to place tables next to each other, here is the solution.
The HTML:
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table>
WORKING DEMO - 2
If you want to place it vertically next to each other, below is the code.
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table>
WORKING DEMO - 3
Hope this is what you are looking for.