javascript - Bootstrap 表跟随 div 内的滚动

Question

我在 div 中有一个表格，它显示了有关 div 中元素的一些重要信息，我希望这个表格与 div 一样长地跟随滚动。

<div id="DivMeritos" class="panel">
    <div class="panel-body">
        <div class=" col-md-12 col-lg-19 ">
           <div class="table-responsive">
              <table>
                <tr style="white-space:nowrap;">
                    <th class="fill"><h2>Meritos</h2></th>
                    <th scope="row" style="white-space:nowrap;">
                        <h2>Auto Puntuación</h2>
                        <input type="text" value="<?= $solicitude->autoPuntuacion ?>" size="2" disabled>
                    </th>
                    <th></th>
                    <th scope="row" style="white-space:nowrap;">
                        <h2>Puntuación Evaluación</h2>
                        <input type="text" id="puntuacion" value="<?= $solicitude->puntuacionEvaluacion ?>" size="2" disabled>
                    </th>
                </tr>
            </table>        
            </div>
                <div class="list-group"> <!-- <a class="list-group-item active"> -->                    
                 {code .....}
                </div>

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

我已经尝试了我发现的关于使用 Javascript/jQuery 使元素跟随滚动的所有方法，但没有结果。

我正在使用 Bootstrap v3.3 和 Cakephp v3.5。

非常感谢。

Answer 1

使用position: fixed;

见下面的代码:

    .panel-body{
        height: 150px;
        overflow-y: scroll;
        padding:0!important;
    }
    .table-responsive{
        position: fixed;
        width:90%!important;
        
    }
    .list-group{
    height: 300px;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <div id="DivMeritos" class="panel">
        <div class="panel-body">
            <div class=" col-md-12">
               <div class="table-responsive">
                  <table class="table">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
          </tr>

        </tbody>
      </table> 
    </div>
     <div class="list-group"> <!-- <a class="list-group-item active"> -->                      

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