不能放水平滚动

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

你必须给滚动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 2

根据你想要的观点，你可以检查这个小提琴是否需要浮动所有表格并添加一个包含所有表格的DIV

This is the fiddle进行了这些更改。

Answer 3

在那个jsfiddle上：http://jsfiddle.net/ryPdK/8/ 改变这个

<div style="width:500px">

宽度到巨大的东西，例如

<div style="width:9999px">

这样它就可以容纳许多这样的表并以你想要的方式工作。