不能把水平滚动

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有这些变化。