我在 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。
非常感谢。
最佳答案
使用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>
关于javascript - Bootstrap 表跟随 div 内的滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51361099/