2012-04-23 12 views
0

私は内側のdivを外側のdivの上部に固定しようとしています。
1.内側のdivは外側のdivよりも幅が広い
2.外側のdivはスクロール可能で、内側のdivはスクロール中に外側のdivの上部に留まる必要があります。内側のdivを外側のdivの上部に固定し、外側のdivをスクロールするときに、内側のdivが外側のdivでオーバーフローするのを防ぎます。

私の問題は、内側のdivが外側のdivの内側に長くとどまることです。


<div id="ScheduleHolder" style="height:100px; width:120px; overflow:scroll"> 

    <div id="2" valign="top" style="float:none; display:block; position:absolute !important; margin:0;"> 

     <table border="1" bgcolor="#99FF00"> 

      <tr> 

      <th scope="col">&nbsp;</th> 

      <th scope="col">&nbsp;</th> 

      <th scope="col">&nbsp;</th> 

      <th scope="col">&nbsp;</th> 

      <th scope="col">&nbsp;</th> 

      <th scope="col">&nbsp;</th> 

      <th scope="col">&nbsp;</th> 

      <th scope="col">&nbsp;</th> 

      <th scope="col">&nbsp;</th> 

      <th scope="col">&nbsp;</th> 

      <th scope="col">&nbsp;</th> 

      <th scope="col">&nbsp;</th> 

      <th scope="col">&nbsp;</th> 



      </tr> 

     </table> 

    </div> 



    <div id="3" style="float:left; display:block;"> 

     <table border="1"> 

      <tr> 

      <th scope="col">&nbsp;</th> 

      <th scope="col">&nbsp;</th> 

      <th scope="col">&nbsp;</th> 

      <th scope="col">&nbsp;</th> 

      <th scope="col">&nbsp;</th> 

      <th scope="col">&nbsp;</th> 

      <th scope="col">&nbsp;</th> 

      <th scope="col">&nbsp;</th> 

      <th scope="col">&nbsp;</th> 

      <th scope="col">&nbsp;</th> 

      <th scope="col">&nbsp;</th> 

      <th scope="col">&nbsp;</th> 

      <th scope="col">&nbsp;</th> 



      </tr> 

      <tr> 

      <th scope="row">&nbsp;</th> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

          <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      </tr> 

      <tr> 

      <th scope="row">&nbsp;</th> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

          <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      </tr> 

      <tr> 

      <th scope="row">&nbsp;</th> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

          <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      </tr> 

      <tr> 

      <th scope="row">&nbsp;</th> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

          <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      </tr> 

      <tr> 

      <th scope="row">&nbsp;</th> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

          <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      </tr> 

      <tr> 

      <th scope="row">&nbsp;</th> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

          <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      </tr> 

      <tr> 

      <th scope="row">&nbsp;</th> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

          <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      </tr> 

      <tr> 

      <th scope="row">&nbsp;</th> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

          <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      </tr> 

      <tr> 

      <th scope="row">&nbsp;</th> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

          <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      </tr> 

      <tr> 

      <th scope="row">&nbsp;</th> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      <td>&nbsp;</td> 

      </tr> 

     </table> 



    </div> 

    <div style="clear:both"></div> 

</div> 

答えて

0

まあちょうど外側のdivの外に、内側のdivを入れて、今、今、当然のことながら、内側のdiv要素である外側のdivとあなたの内のdivに外側のdivである内部のdivを整列します古い内側のdivの上に表示されますが、それは密かに外側のdivであることがわかります。

0

あなたはこの問題を処理するためのDataTable jQueryプラグインを試してみたいと思います: http://datatables.net/

+0

うーん興味深い...私はこれをどのように使うのですか? – Nation

+0

私はテーブル上でこのツールを使用しようとしていますが、どこにもいません。そこにスクロールする例を使用しようとしています。 – Nation

+0



テーブルは私が使用している行ヘッダーは、まだ動作しますか? – Nation

関連する問題