Question

I’m using the latest version of Firefox and Chrome on Win XP. I want to display two tables on the same horizontal plane. However, I’m having a problem. Right now I have:

<table width="100" style="display: inline-block;">
    ...
</table>
<table width="100" style="display: inline-block;">
    ...
</table>

However, right now, the two tables overlap because the content of the first table is bigger than 100 pixels. Without changing the width, does anyone know how I can change/add to the styles so that the second table will appear to the right of the first table but clear all of the first table’s contents?

Answer 1

In principle you could just set overflow: hidden on the first table, but IE (even IE 9) does not implement it properly in this case. The workaround is to wrap your tables in div elements and set the relevant properties on them:

<style>
.tablediv { display: inline-block; width: 100px; overflow: hidden }
</style>

<div class=tablediv>
<table>
  ...
</table>
<div class=tablediv>
<table>
  ...
</table>

This way, the content in one of the tables that does not fit into the allocated width is complete absent from the rendering. So it might be more effective than desired, but the question was not quite clear in this respect.