爲什麼我的兩個表不能彼此相鄰出現在IE9

Question

我的基本輪廓是這樣的：

<div class="availability-tables" > 
    <table class="table table-bordered availability-table-property-column"> 
    </table> 
    <table class="table viewings-table show-scroll-bar" > 
    </table> 
</div> 

中的jsfiddle這裏的更多細節：http://jsfiddle.net/3ezxu/8/

如果你在IE9運行（或在IE的更高版本中使用IE9文檔模式的IE9兼容模式），則其中一個表格出現在另一個表格的下面，而不是在其旁邊。

在IE瀏覽器的Chrome/FF /更高版本中，兩個表格彼此相鄰並帶有左手錶格的滾動條。

浮離開，像這樣：

.gyms-table { 
    float: left; 
} 
.availability-table-property-column { 
    float:left; 
} 

http://jsfiddle.net/3ezxu/9/

只是平了在任何瀏覽器無法正常工作，如果我使用絕對或相對定位的話，我無法獲得滾動-x上班

有什麼建議嗎？我真的在這個系列的末尾。

Answer 1

表格的問題是，即使您定義寬度，它也會受到單元格內容的影響。表格的寬度可能不受尊重。

也許你可以換你的表與每一個DIV，然後使用這些div定位並排側，就像這樣：

http://jsfiddle.net/3ezxu/15/

<div class="availability-tables" > 
    <div> 
     <table class="table table-bordered availability-table-property-column"> 
     <!-- TABLE 01 -->   
     </table> 
    </div> 

    <div> 
     <table class="table gyms-table show-scroll-bar" > 
     <!-- TABLE 02 --> 
     </table> 
    </div> 
</div> 

這添加到CSS：

.availability-tables { 
    padding-right: 7px; 
    padding-left: 7px; 
    display: table; 
    width: 100%; 
} 

.availability-tables > div { 
    display: table-cell; 
    position: relative; 
} 

.availability-tables > div:first-child { 
    width: 20%; 
}