Jquery 使用固定标题滚动表格时出现问题。在拐角处，收割台让路对齐
我已经构建了一个示例代码来保持头部固定，这也是可行的。问题是在对齐结束时滚动x轴滚动。收割台的移动超过车身对齐。请帮我修一下。代码如下Jquery 使用固定标题滚动表格时出现问题。在拐角处，收割台让路对齐,jquery,css,html,html-table,Jquery,Css,Html,Html Table,我已经构建了一个示例代码来保持头部固定，这也是可行的。问题是在对齐结束时滚动x轴滚动。收割台的移动超过车身对齐。请帮我修一下。代码如下 <body> <script type="text/javascript"> function onScrollDiv(div) { var headerDiv = document.getElementById("TableHeaderContainer"); headerDiv.scrollLe
<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>
函数onScrollDiv（div）{
var headerDiv=document.getElementById（“TableHeaderContainer”）；
headerDiv.scrollLeft=div.scrollLeft；
}
td，th
{
边框：.5px实心；
}
身份证件
名称
姓
城市
电子邮件
出生日期
110
阿卜杜勒
沙弗
盖特林堡
埃吉特。dictum@In.ca
09/03/1958
110
阿卜杜勒
沙弗
盖特林堡
埃吉特。dictum@In.ca
09/03/1958
110
阿卜杜勒
沙弗
盖特林堡
埃吉特。dictum@In.ca
09/03/1958
110
阿卜杜勒
沙弗
盖特林堡
埃吉特。dictum@In.ca
09/03/1958
110
阿卜杜勒
沙弗
盖特林堡
埃吉特。dictum@In.ca
09/03/1958
110
阿卜杜勒
沙弗
盖特林堡
埃吉特。dictum@In.ca
09/03/1958
110
阿卜杜勒
沙弗
盖特林堡
埃吉特。dictum@In.ca
09/03/1958
110
阿卜杜勒
沙弗
盖特林堡
埃吉特。dictum@In.ca
09/03/1958
110
阿卜杜勒
沙弗
盖特林堡
埃吉特。dictum@In.ca
09/03/1958
110
阿卜杜勒
沙弗
盖特林堡
埃吉特。dictum@In.ca
09/03/1958
110
阿卜杜勒
沙弗
盖特林堡
埃吉特。dictum@In.ca
09/03/1958
110
阿卜杜勒
沙弗
盖特林堡
埃吉特。dictum@In.ca
09/03/1958
110
阿卜杜勒
沙弗
盖特林堡
埃吉特。dictum@In.ca
09/03/1958
110
阿卜杜勒
沙弗
盖特林堡
埃吉特。dictum@In.ca
09/03/1958
酷找到了灵魂。只需将宽度减小到宽度的97%