0

私は水平スクロールを入れて平らにしようとしています、これがフィドルです

私が間違っていることを見つけるのを手伝ってください

編集

これがマークアップです

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

これが現在のスクリーンショットと望ましい出力です

ここに画像の説明を入力してください

4

3 に答える 3

2

希望するビューに応じて、このフィドルですべてのテーブルをフロートさせ、すべてのテーブルを含むDIVをもう1つ追加する必要があることを確認できます。

これはそれらの変化を持っているフィドルです。

于 2012-05-02T07:48:50.537 に答える
2

スクロール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>  
​
于 2012-05-02T07:22:06.180 に答える
1

そのjsfiddleで：http：//jsfiddle.net/ryPdK/8/これを 変更します

<div style="width:500px">

何か巨大なものへの幅、例えば

<div style="width:9999px">

そのような多くのテーブルに対応でき、希望どおりに機能するようにします。

于 2012-05-02T10:58:32.670 に答える