修复外部div顶部的内部div,滚动外部div时,防止外部div溢出内部div

时间:2012-04-23 03:35:28

标签: javascript jquery html css

我一直试图在外部div的顶部修复一个内部div。
1.内部div应该比外部div宽
2.外部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>

2 个答案:

答案 0 :(得分:0)

好吧,只需将内部div放在外部div之外,并将内部div(现在是外部div)与外部div对齐,当然,现在是内部div,内部div将出现在旧内部顶部div,但我们知道这是秘密的外部div。

答案 1 :(得分:0)

您想尝试使用DataTables jQuery插件来处理此问题: http://datatables.net/