javascript - 使用 CSS，尝试并排居中和对齐多个表格

Question

我有一个标题栏，我试图在其中创建 3 个部分:左、中、右。

所有内容都必须垂直居中并向后兼容 IE7，这就是我使用表格的原因，除非您有更简单的解决方案。

如您现在所见，中心内容表正在堆叠。我如何设计它以使表格并排对齐？

演示:http://jsfiddle.net/drvn9x26/35/

更新:我尝试了一个建议。这些表现在是并排的，但您会注意到，当其中一个表突出显示且格式关闭时，它仍然不太正确。我还需要突出显示的蓝色内容来准确填充容器。

更新 2:好的，我刚刚意识到部分问题。我的浏览器放大了 125%...当我缩小时，容器和底部之间实际上没有 1 像素的空间。

更新 3:Paul 提供了一个适合我的解决方案。我感谢所有建议。

.container{
    white-space: nowrap;
    background-color: red;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 50px;
    float: none;
    position: fixed;
}
table {
    height: 50px;
    border-spacing: 0px;
}
td {
    padding: 0px;
}

.cell-left {
    float:left;
}
.cell-selected {
    background-color:blue;
    color:white;
}
.cell-right {
    position:absolute; 
    top:0px; 
    right:0px;
}

<div class='container'>
    <div class='cell-left'>
        <table class='cell cell-selected'><tr><td>
            LEFT
        </td></tr></table>
    </div>
<center>
<table class='cell'><tr>
<td><table class='cell cell-selected'><tr><td>CENTER1</td></tr></table></td>
<td><table class='cell'><tr><td>CENTER2</td></tr></table></td>
<td><table class='cell'><tr><td>CENTER3</td></tr></table></td>
</tr></table> 
</center>
    <div class='cell-right'>
        <table class='cell'><tr><td>
            RIGHT
        </td></tr></table>
    </div>
</div>

Answer 1

使用 td 标签代替中心部分内的三个表格。

<table class='cell'>
  <tr>
    <td>CENTER1</td>
    <td>CENTER2</td>
    <td>CENTER3</td>
  </tr>
</table>  

[EDIT] 只有一张表的版本 http://jsfiddle.net/drvn9x26/33/