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>

这是当前和所需输出的屏幕截图

enter image description here

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">

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

不能放水平滚动

3 个答案: