Question

我以为我最初实现了这一点，但我使用的方法并不正确。我将表头和表数据分成两个单独的表，每个表都在一个div内关闭。然后我将溢出放在每个表段的外部div上。但是，这不起作用，因为当我有大量的列时，它开始将列挤压在一起，而我仍然希望它们具有固定宽度。有人可以帮忙吗？我在下面的代码中省略了事件监听器。

<div id='HeaderTable' style='overflow:auto;overflow-x:hidden;overflow-y:scroll;width:900px;'>
    <table border='1' style='width:1900px;float:left;'>
        <thead style='text-align:left;'>
            <tr style='display:block;'>
                <th width='100' style='width:100px;'>test1</th>
                <th width='100' style='width:100px;'>test2</th>
                <th width='100' style='width:100px;'>test3</th>
                <th width='100' style='width:100px;'>test4</th>
                <th width='100' style='width:100px;'>test5</th>
                <th width='100' style='width:100px;'>test6</th>
                <th width='100' style='width:100px;'>test7</th>
                <th width='100' style='width:100px;'>test8</th>
                <th width='100' style='width:100px;'>test9</th>
            </tr>
        </thead>
    </table>
</div>

<div id='DataTable' style='height:300px;float:left;overflow:auto;overflow-x:auto;overflow-y:scroll;width:900px;>
    <table border='1' style='width:1900px;float:left;'>
        <tbody id='ClearDetails'>
            <tr id='Row0'    style='color:black;height:auto;display:block;'>
                <td style='width:100px;'>1</td>
                <td id='Row0Col0' style='width:100px;'>1625</td>
                <td id='Row0Col0' style='width:100px;'>25</td>
                <td id='Row0Col0' style='width:100px;'>25</td>
                <td id='Row0Col0' style='width:100px;'>25</td>
                <td id='Row0Col0' style='width:100px;'>25</td>
                <td id='Row0Col0' style='width:100px;'>25</td>
                <td id='Row0Col0' style='width:100px;'>25</td>
                <td id='Row0Col0' style='width:100px;'>25</td>
                <td id='Row0Col0' style='width:100px;'>25</td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

首先，您不必分成两个不同的div：查看Pure CSS Table with Fixed Header。

其次，为什么在一个位置的表格列为1900，而另一个位置列为900？

第三，你是否关闭了边距和填充以确保块实际上是100px？

最后，在IE中，您必须考虑滚动条的宽度，因此您需要减小每列的大小，或者增加整个表的宽度以适应它。

HTML Scrollable表垂直和水平

1 个答案: