使用CSS，並排對齊多個表格

Question

我有一個標題欄，我試圖創建3個部分：左，中，右。

所有內容都必須垂直居中並與IE7向後兼容，這就是爲什麼我使用表格，除非您有更簡單的解決方案。

正如您現在所看到的，中心內容表正在堆疊。我怎麼樣才能讓桌子並排排列？

DEMO：http://jsfiddle.net/drvn9x26/35/

更新：我試過一個建議。這些表格現在是並排的，但是當您突出顯示其中一個表格時，它仍然不太正確，格式設置爲關閉。我還需要突出顯示的藍色內容才能完全填充容器。

UPDATE2：好的，我剛剛意識到部分問題。我的瀏覽器放大了125％......當我縮小時，容器和底部之間實際上沒有1像素的空間。

UPDATE3：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

爲中心表浮動的div丟失，應該不會是：

<div class='cell-left'><table class='cell'><tr><td> 
     CENTER1 
    </td></tr></table></div> 
    <table class='cell'><tr><td> 
     CENTER2 
    </td></tr></table> 
    <div class='cell-right'><table class='cell'><tr><td> 
     CENTER3 
    </td></tr></table></div> 

但不管那個，爲什麼不對每個結構級別使用一個表格，而不是每個元素的表格。

請參閱DEMO 1爲堆疊表。對於嵌套表，請參閱DEMO 2。

見DEMO 3與亮點功能嵌套表（試行懸停！）。

對於所有單元的高度相等參見DEMO 4。

請參閱DEMO 5以調整左側和右側最遠的單元格和中心單元格的寬度，跨越其間的所有內容。

請參閱DEMO 6，調整左側和最右側單元格和中央單元格的寬度儘可能小。

Answer 2

而不是中心部分內的三個表使用使用td標籤。

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

[編輯]版本只有一個表http://jsfiddle.net/drvn9x26/33/

Answer 3

可能的解決方案沒有表和一點JS來設置每列上相同的高度。 的.before和<span class="before"></span>在這裏作爲:before的替代品（因爲它不能在IE7工作）

http://jsfiddle.net/OxyDesign/p3tv9n5m/

HTML

<div class='container'> 
    <div class='cell cell-left'> 
     <span class="before"></span><span class="cell-content">content</span> 
    </div> 
    <div class='cell cell-center'> 
     <span class="before"></span><span class="cell-content">content<br />content<br />content</span> 
    </div> 
    <div class='cell cell-right'> 
     <span class="before"></span><span class="cell-content">content</span> 
    </div> 
</div> 

CSS

.container { 
    position:relative; 
} 
.cell{ 
    width:33.3333333333333%; 
    float:left; 
} 
.cell .before { 
    width:0; 
    height:100%; 
    display:inline-block; 
    vertical-align:middle; 
} 
.cell-content { 
    display:inline-block; 
    vertical-align:middle; 
} 
.cell-left{ 
    text-align:left; 
    background:#ccc; 
} 
.cell-center{ 
    text-align:center; 
    background:#ddd; 
} 
.cell-right{ 
    text-align:right; 
    background:#ccc; 
} 

JS

$(document).ready(function(){ 
    var cells = $('.cell'), 
     cellsLgth = cells.length, 
     maxHeight = 0; 

    for(var i = 0; i < cellsLgth; i++){ 
     var height = cells.eq(i).height(); 
     if(height > maxHeight) maxHeight = height; 
    } 
    cells.css('height',maxHeight); 
}); 

Answer 4

.container{ 
white-space: nowrap; 
background-color: red; 
top: 0px; 
left: 0px; 
width: 100%; 
position: fixed; 
text-align:center; 
} 
table { 
width:100%; 
border-spacing: 0px; 
} 

table td { 
width:33.3333%; 
height:50px; 
line-height:50px; 
} 


<div class='container'> 

<table> 
    <tr> 
     <td>LEFT</td> 
     <td>CENTER</td> 
     <td>RIGHT</td> 
    </tr> 
</table> 

</div> 

http://jsfiddle.net/drvn9x26/39/