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

Answer 2

Here is my idea. Something like this:

<style>
  table {
    width: 100%;
    border: 1px #cccccc solid; /* for cells preview */
  }
  td.left, td.right {
    width: 33.33%;
    background-color: #f0f0f0;  /* for cells preview */
  }
  td {
    border: 1px #cccccc solid; /* for cells preview */
    height: 400px;
    padding: 0;
  }
  td.middle {
    text-align: center;
  }
  td.middle img {
    max-width: 100%;
    max-height: 100%;
  }
</style>

<table>
  <tr>
    <td class="left">
      Left cell content
    </td>
    <td class="middle">
      <img src="http://themify.me/demo/themes/pinshop/files/2012/12/man-in-suit2.jpg">
    </td>
    <td class="right">
      Right cell content
    </td>
  </tr>
</table>