ヘッダーを固定するサンプル コードを作成しましたが、これも機能しています。問題は、配置が与える最後に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>