我已经构建了一个示例代码来保持标头固定，这也是有效的。问题是在对齐放弃的末尾滚动x轴滚动。标题比身体对齐更多。请帮我修理它。代码如下。
<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>
答案 0 :(得分：1)
酷找到解决方案。只需将宽度减小到
的97％ <div style="overflow-x: hidden; overflow-y: auto; margin-right: 20px; width: 97%;" id="TableHeaderContainer">