0

我已经构建了一个示例代码来保持标题固定，这也有效。问题在于在对齐的最后滚动 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>

4

1 回答 1

1

酷找到了灵魂。只需将宽度减小到 97%

<div style="overflow-x: hidden; overflow-y: auto; margin-right: 20px; width: 97%;" id="TableHeaderContainer">

于 2013-01-31T07:16:30.713 回答