【发布时间】：2021-06-24 03:56:56
【问题描述】：
我有一张桌子，如果tbody 大于 大于 1000 像素，我会尝试让其滚动。
我尝试了以下方法：
.fixed_header tbody{
display:block;
overflow:auto;
height:1000px;
width:100%;
}
.fixed_header thead tr{
display:block;
}
卷轴有效，但它破坏了我的风格。
之前
之后
实时结果： https://www.bunlongheng.com/baby/1?code=rithys4k&date=2021-03-01
如何保持滚动但让页面的其余部分保持固定？
代码
<table class="table fixed_header">
<thead class="thin-border-bottom">
<tr style="border-top: 0px; border-bottom: 0px; box-shadow: none;">
<th>Type</th>
<th>Time</th>
<th>Note</th>
</tr>
</thead>
<tbody class="tbody-log">
<tr data-type="feed" style="border-top: 0px; border-bottom: 0px; box-shadow: none;">
<td>
<a class="btn btn-feed">
<img class="logIconSmall" src="/assets/be/img/baby/feed.png?q=0.05347300 1616851924">
</a>
</td>
<td>
<a data-toggle="modal" data-target="#edit_446" data-backdrop="static" data-keyboard="false" type="button" class="btn btn-link">
01:59 am
</a>
<div class="modal fade" id="edit_446">
<div class="model-content" style="margin-top: 200px;">
<div class="col-sm-offset-4 col-sm-2 col-md-offset-5 col-md-2 text-center">
<img width="80" src="/assets/be/img/baby/feed.png">
<br><br><br>
<input type="text" value="01:59:50" name="updatedAt" width="100%" height="80">
<br><br>
<button onclick="updateLog(446)" class="btn btn-success btn-block">Done</button>
<br>
<button onclick="deleteLog(446)" class="btn btn-danger btn-block">Delete</button>
</div>
</div>
</div>
</td>
<td id="td-446">
<span style="font-weight: bold; color:#00ff5c;">+36955.2m </span>
</td>
</tr>
</tbody>
</table>
编辑
移动设备的目标是让内容具有完整的宽度，而不是在表格下方留出空间。
【问题讨论】：
-
我不打算用代码把帖子弄得乱七八糟。
-
是的。我用它引导。
-
这是很多很多帖子的副本，包括How to set tbody height with overflow scroll
-
还有一个非常像你的情况：HTML table with 100% width, with vertical scroll inside tbody（顺便说一句：它解释了下面答案中使用的
display-block -
您用“jquery”标记了您的问题。能否请您为我们添加相关的 jquery 代码？
标签： jquery css twitter-bootstrap html-table