保持一个具有太多div的网页的一部分，修复

Question

我有一个网页里面有太多的div。我想保持一部分网页固定，即使它正在向下滚动

问题

我尝试了很多种组合。但问题是由于太多的div我无法＆＃34; cut＆＃34;带有div的网页的一部分，我可以为其分配position:fixed的课程。任何帮助都将非常感谢

我的实际HTML代码（我正在使用django，因此有许多django / jinja变量忽略它们）

{% block content %}

    <div class="content-wrapper">
        <div class="row">
          <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
              <div class="card-body">
                <h4 class="card-title">My Webpage</h4>
                <p class="card-description" style="color:black;">
                  Zone for Gasoline:A, Year :2018
                </p>
                <div class="row">
                    <div class="col-md-12">
                        <div class="btn-group btn-block mb-4" aria-label="Brand placement algorithm steps">
                    <div class="col md-4">
                    <a href="/app/step-1/"> <button type="button" class="btn btn-block btn-outline-secondary"> Step 1 </button> </a>
                    </div>

                <div class="col md-4">
                    <a href="/app/step-2/"> <button type="button"  class="btn btn-block btn-outline-secondary" > Step 2  </button> </a>
                </div>

                <div class="col md-4">
                    <a href="/app/step-3/"> <button type="button" class="btn btn-block btn-primary"> Step 3 </button></a>
                </div>
                        </div>
                    </div>
                </div>

                <div id="capture-this">
                    <div class="gridster">
                        <table border = "1" class=".table-responsive">
                            <tr>
                                <th colspan="4"  style="background-color:#05345c;">Zone 1</th>
                                <th colspan="4"  style="background-color:#05345c;">Zone 2</th>
                                <th colspan="4"  style="background-color:#05345c;">Zone 3</th>
                                {% ifequal request.session.step 4 %}    
                                <th colspan="4"  style="background-color:#05345c;">Period 4</th>
                                {% endifequal %}
                            </tr>
                            <tr>
                                <td width="400" align="center" style="background-color:#0085ca">T1</td>
                                <td width="400" align="center" style="background-color:#0085ca">T2</td>
                                <td width="400" align="center" style="background-color:#0085ca">T3</td>
                                <td width="400" align="center" style="background-color:#0085ca">T4</td>
                                <td width="400" align="center" style="background-color:#0085ca">T1</td>
                                <td width="400" align="center" style="background-color:#0085ca">T2</td>
                                <td width="400" align="center" style="background-color:#0085ca">T3</td>
                                <td width="400" align="center" style="background-color:#0085ca">T4</td>
                                <td width="400" align="center" style="background-color:#0085ca">T1</td>
                                <td width="400" align="center" style="background-color:#0085ca">T2</td>
                                <td width="400" align="center" style="background-color:#0085ca">T3</td>
                                <td width="400" align="center" style="background-color:#0085ca">T4</td>
                                {% ifequal request.session.step 4 %}    
                                <td width="400" align="center" style="background-color:#0085ca">T1</td>
                                <td width="400" align="center" style="background-color:#0085ca">T2</td>
                                <td width="400" align="center" style="background-color:#0085ca">T3</td>
                                <td width="400" align="center" style="background-color:#0085ca">T4</td>
                                {% endifequal %}
                            </tr>
                        </table>
                    <!---I want webpage till here to remain fixed -->
                        <ul>

                        </ul>
                    </div>
                </div>



                {% block content_controls %}
                {% endblock %}
              </div>
            </div>
          </div>
        </div>
    </div>

我想要什么

我基本上希望网页直到</table>标记保持不变。我正在使用Gridster，其中包含<li>元素形式的小部件，因此这些将位于<ul>下。

会有太多此类<li>元素，因此当用户向下滚动<table>及以上内容时，应修复

A rough Fiddle（小提琴是为了了解网页的外观） 在小提琴中，我期待直到表行具有值T1，T2，T3，T4 ....网页应该保持修复