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

只需固定div的位置：

.table-responsive {
    position: fixed;
}

Answer 2

使用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>

引导表跟随div内部滚动

2 个答案: