Tables inline-block/inline-table in IE7

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>&nbsp;</td>
      </tr>
    </table></td>
    <td><table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td>&nbsp;</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>&nbsp;</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table></td>
  </tr>
</table>

WORKING DEMO - 3

Hope this is what you are looking for.