2012-04-23 141 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。

0

你想嘗試一下數據表的jQuery插件來處理這個問題: http://datatables.net/

+0

嗯...有趣如何使用呢? – Nation 2012-04-23 13:25:12

+0

我想在桌上使用這個工具,但沒有得到任何地方。嘗試使用那裏滾動的例子。 – Nation 2012-04-23 16:46:34

+0



我使用的表格有行標題,將仍然有效? – Nation 2012-04-23 17:41:05