不能把水平滾動

Question

我試圖把一個水平滾動和倒平，here is the fiddle

請幫我看看我在做什麼錯

編輯

這裏是標記

<table > 
     <tr> 
     <td style="width:300px;"> 
     <div style="width:300px;overflow-x:scroll !important;"> 
       <table style="width:100:float:left!important;">       <caption>2011</caption> 
          <td class="top">Brand</td>  
          <td class="top">Target</td> 

          <tr> 
           <td>ABC</td> 
           <td>22</td> 

          </tr>  
       </table> 
      <table style="width:100px;float:left!important;">      <caption>2012</caption> 
          <td>Brand</td>  
          <td>Target</td> 
          <tr> 
           <td>bnc</td> 
           <td>22</td>         
          </tr> 
      </table> 
<table style="width:100px;float:left!important;">      <caption>2012</caption> 
          <td>Brand</td>  
          <td>Target</td> 
          <tr> 
           <td>bnc</td> 
           <td>22</td>         
          </tr> 
      </table> 
<table style="width:100px;float:left!important;">      <caption>2012</caption> 
          <td>Brand</td>  
          <td>Target</td> 
          <tr> 
           <td>bnc</td> 
           <td>22</td>         
          </tr> 
      </table> 
<table style="width:100px;float:left!important;">      <caption>2012</caption> 
          <td>Brand</td>  
          <td>Target</td> 
          <tr> 
           <td>bnc</td> 
           <td>22</td>         
          </tr> 
      </table>    
     </div> 
     </td>   
    </tr>    
</table> 
​ 

這裏是當前的屏幕截圖和所需的輸出

Answer 1

在那的jsfiddle：http://jsfiddle.net/ryPdK/8/ 改變這種

<div style="width:500px"> 

寬度大事業，如

<div style="width:9999px"> 

，以便它可以容納很多這樣的表格和工作你想要的方式。

Answer 2

你必須給滾動DIV小於寬度，則內表這樣，Demo available here JsFiddle

<table style="width:400px" > 
     <tr> 
     <td style="width:300px;"> 
     <div style="width:300px;overflow-x:scroll !important;"> 
       <table style="width:350px">       <caption>2011</caption> 
          <td class="top">Brand</td>  
          <td class="top">Target</td> 

          <tr> 
           <td>ABC</td> 
           <td>22</td> 

          </tr>  
       </table> 
      <table style="width:100px;float:left!important;">      <caption>2012</caption> 
          <td>Brand</td>  
          <td>Target</td> 
          <tr> 
           <td>bnc</td> 
           <td>22</td>         
          </tr> 
      </table> 
<table style="width:100px;float:left!important;">      <caption>2012</caption> 
          <td>Brand</td>  
          <td>Target</td> 
          <tr> 
           <td>bnc</td> 
           <td>22</td>         
          </tr> 
      </table> 
<table style="width:100px;float:left!important;">      <caption>2012</caption> 
          <td>Brand</td>  
          <td>Target</td> 
          <tr> 
           <td>bnc</td> 
           <td>22</td>         
          </tr> 
      </table>    
     </div> 
     </td>   
    </tr>    
</table> 
​ 

Answer 3

Acoording到您想要的視圖，你可以檢查此琴所需要的所有表浮動，並增加了一個包含所有表的DIV

This is the fiddle有這些變化。