我已经构建了一个示例代码来固定 header ，它也可以正常工作。问题在于对齐结束时滚动 x 轴滚动。头部移动比 body 对齐更多。请帮我修复它。代码如下。
<body>
<script type="text/javascript">
function onScrollDiv(div) {
var headerDiv = document.getElementById("TableHeaderContainer");
headerDiv.scrollLeft = div.scrollLeft;
}
</script>
<style>
td, th
{
border:.5px solid;
}
</style>
<div class="outerTableContainer" style="width:800px;">
<div id="TableHeaderContainer" style="margin-right:20px;width: 100%;overflow-x: hidden;overflow-y: auto;">
<table class="gridHeader" style="position: relative;table-layout: fixed;width: 100%;empty-cells: show;border-collapse: collapse;border-spacing: 0;">
<colgroup>
<col style="width: 100px;"/>
<col style="width: 170px;"/>
<col style="width: 150px;"/>
<col style="width: 150px;"/>
<col style="width: 220px;"/>
<col style="width: 150px;"/>
</colgroup>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Surname</th>
<th>City</th>
<th>Email</th>
<th>Date of birth</th>
</tr>
</thead>
</table>
</div>
<div class="TableBodyContainer" style="height: 300px; overflow-y: scroll;overflow-x: auto;" onscroll="onScrollDiv(this)">
<table class="gridBody" style="table-layout: fixed;width: 100%;empty-cells: show;border-collapse: collapse;border-spacing: 0;">
<colgroup>
<col style="width: 100px;"/>
<col style="width: 170px;"/>
<col style="width: 150px;"/>
<col style="width: 150px;"/>
<col style="width: 220px;"/>
<col style="width: 150px;"/>
</colgroup>
<tbody>
<tr>
<td class="ui-widget-content">110</td>
<td class="ui-widget-content">Abdul</td>
<td class="ui-widget-content">Shaffer</td>
<td class="ui-widget-content">Gatlinburg</td>
<td class="ui-widget-content">eget.dictum@In.ca</td>
<td class="ui-widget-content">09/03/1958</td>
</tr>
<tr>
<td class="ui-widget-content">110</td>
<td class="ui-widget-content">Abdul</td>
<td class="ui-widget-content">Shaffer</td>
<td class="ui-widget-content">Gatlinburg</td>
<td class="ui-widget-content">eget.dictum@In.ca</td>
<td class="ui-widget-content">09/03/1958</td>
</tr>
<tr>
<td class="ui-widget-content">110</td>
<td class="ui-widget-content">Abdul</td>
<td class="ui-widget-content">Shaffer</td>
<td class="ui-widget-content">Gatlinburg</td>
<td class="ui-widget-content">eget.dictum@In.ca</td>
<td class="ui-widget-content">09/03/1958</td>
</tr>
<tr>
<td class="ui-widget-content">110</td>
<td class="ui-widget-content">Abdul</td>
<td class="ui-widget-content">Shaffer</td>
<td class="ui-widget-content">Gatlinburg</td>
<td class="ui-widget-content">eget.dictum@In.ca</td>
<td class="ui-widget-content">09/03/1958</td>
</tr>
<tr>
<td class="ui-widget-content">110</td>
<td class="ui-widget-content">Abdul</td>
<td class="ui-widget-content">Shaffer</td>
<td class="ui-widget-content">Gatlinburg</td>
<td class="ui-widget-content">eget.dictum@In.ca</td>
<td class="ui-widget-content">09/03/1958</td>
</tr>
<tr>
<td class="ui-widget-content">110</td>
<td class="ui-widget-content">Abdul</td>
<td class="ui-widget-content">Shaffer</td>
<td class="ui-widget-content">Gatlinburg</td>
<td class="ui-widget-content">eget.dictum@In.ca</td>
<td class="ui-widget-content">09/03/1958</td>
</tr>
<tr>
<td class="ui-widget-content">110</td>
<td class="ui-widget-content">Abdul</td>
<td class="ui-widget-content">Shaffer</td>
<td class="ui-widget-content">Gatlinburg</td>
<td class="ui-widget-content">eget.dictum@In.ca</td>
<td class="ui-widget-content">09/03/1958</td>
</tr>
<tr>
<td class="ui-widget-content">110</td>
<td class="ui-widget-content">Abdul</td>
<td class="ui-widget-content">Shaffer</td>
<td class="ui-widget-content">Gatlinburg</td>
<td class="ui-widget-content">eget.dictum@In.ca</td>
<td class="ui-widget-content">09/03/1958</td>
</tr>
<tr>
<td class="ui-widget-content">110</td>
<td class="ui-widget-content">Abdul</td>
<td class="ui-widget-content">Shaffer</td>
<td class="ui-widget-content">Gatlinburg</td>
<td class="ui-widget-content">eget.dictum@In.ca</td>
<td class="ui-widget-content">09/03/1958</td>
</tr>
<tr>
<td class="ui-widget-content">110</td>
<td class="ui-widget-content">Abdul</td>
<td class="ui-widget-content">Shaffer</td>
<td class="ui-widget-content">Gatlinburg</td>
<td class="ui-widget-content">eget.dictum@In.ca</td>
<td class="ui-widget-content">09/03/1958</td>
</tr>
<tr>
<td class="ui-widget-content">110</td>
<td class="ui-widget-content">Abdul</td>
<td class="ui-widget-content">Shaffer</td>
<td class="ui-widget-content">Gatlinburg</td>
<td class="ui-widget-content">eget.dictum@In.ca</td>
<td class="ui-widget-content">09/03/1958</td>
</tr>
<tr>
<td class="ui-widget-content">110</td>
<td class="ui-widget-content">Abdul</td>
<td class="ui-widget-content">Shaffer</td>
<td class="ui-widget-content">Gatlinburg</td>
<td class="ui-widget-content">eget.dictum@In.ca</td>
<td class="ui-widget-content">09/03/1958</td>
</tr>
<tr>
<td class="ui-widget-content">110</td>
<td class="ui-widget-content">Abdul</td>
<td class="ui-widget-content">Shaffer</td>
<td class="ui-widget-content">Gatlinburg</td>
<td class="ui-widget-content">eget.dictum@In.ca</td>
<td class="ui-widget-content">09/03/1958</td>
</tr>
<tr>
<td class="ui-widget-content">110</td>
<td class="ui-widget-content">Abdul</td>
<td class="ui-widget-content">Shaffer</td>
<td class="ui-widget-content">Gatlinburg</td>
<td class="ui-widget-content">eget.dictum@In.ca</td>
<td class="ui-widget-content">09/03/1958</td>
</tr>
</tbody>
</table>
</div>
</div>
最佳答案
酷找到灵魂。只是将宽度减少到 97%
<div style="overflow-x: hidden; overflow-y: auto; margin-right: 20px; width: 97%;" id="TableHeaderContainer">
关于jquery - 使用固定标题滚动表格时出现问题。在拐 Angular 处，标题让位于对齐方式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14620200/