CSS table affect on another table

Question

I have this CSS table code:

 .navgroups table#rightTable {
     float: right;
     width: 33%;
 }
 .navgroups table#leftTable {
     float: left;
     width: 33%;
 }
 .nvagroups td#centerTable {
     margin: auto;
 }

In the middle table I want to insert an image, but the problem is bigger then just 33% (image size). Every single letter in the middle table lowers the left table from the bar.

I tried the display:inline and display:inline-block.

Answer 1

I will just put this as an answer and I don't think anyone can get much better then this with the information you provided.

HTML:

<table class="rightTable">
    <tr>
        <td></td>
    </tr>
</table>
<table class="leftTable">
    <tr>
        <td></td>
    </tr>
</table>
<table class="centerTable">
    <tr>
        <td>
            <img src="http://www.greeningaustralia.org.au/images/global/gallery-image.jpg" />
        </td>
    </tr>
</table>

CSS:

.rightTable {
    float: right;
    width: 33%;
}
.leftTable {
    float: left;
    width: 33%;
}
.centerTable {
    margin: auto;
    width: 33%;
}
table {
    outline: 1px solid;
}
img {
    width: 100%;
}

This is 3 tables all 33.33% with an image that fits in the center one.

DEMO HERE

And in this demo below we have text in the other tables. Works fine.

DEMO HERE

---

Update:

Demo of using 1 table instead of 3.

DEMO HERE