html - 不能放水平滚动

Question

我正在尝试放置水平滚动并平放，这是小提琴

请帮我找出我做错了什么

编辑

这是标记

<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 比这样的内表更小的宽度，这里有演示 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

这是有这些变化的小提琴。

Answer 3

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

<div style="width:500px">

宽度到巨大的东西，例如

<div style="width:9999px">

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