Question

我试图基本上“冻结”HTML表格中的列，类似于Excel中可以完成的操作。但是，我需要能够向两个方向滚动。我目前正在尝试通过使用可垂直滚动的div来保存一个表来实现这一点，该表在左侧包含一个名称列表，在右边则包含一个水平可滚动的div，其中包含与这些名称相关的数据。其中每个都有一个fixed-div来保存列标题数据。问题是，使用此方法时，水平滚动条位于div的底部，只有在滚动到最底部时才能查看。有没有办法将此滚动条的位置固定到外部div的底部？我敢肯定这里肯定有某种解决方案，但我还没找到它。任何帮助将不胜感激。

注意：我也为此网站提供了JavaScript / JQuery。

编辑：根据要求，这是我目前正在处理的标记：

<div id='am_verticalScrollerDiv' style='height: 440px; overflow-y: auto;'>" +
    <table id='am_verticalScrollerLayoutTable' height='100%' border='0' cellpadding='0' cellspacing='0'>
        <tr>
            <td id='am_resourceListCell'>
                <div id='am_resourceListDiv'>
                    <table id='am_resourceTitleTable' width='100%' border='0' cellpadding='0' cellspacing='0'>
                        <tr id='am_resource_tableTitleBar'></tr>
                    </table>
                </div>
                <table id='am_resourceList' width='100%' border='0' cellpadding='0' cellspacing='0'>
                    <tbody></tbody>
                </table>
            </td>
            <td id='am_horizScrollCell'>
                <div id='am_horizScrollDiv' style='width:900px; overflow-x: auto;'>
                    <div id='am_schedDataTitleBarDiv'>
                        <table id='am_schedDataTitleBarTable>
                            <tr class='am_schedule_formatBar'></tr>
                            <tr id='am_schedule_tableTitleBar' style='font-family: \"Courier New\", Courier, monospace; font-size: 12px;'></tr>
                        </table>
                    </div>
                    <table id='am_scheduleDisplay' width='100%' border='0' cellpadding='0' cellspacing='0' style='table-layout: fixed; empty-cells: show;'>
                        <thead>
                            <tr class='am_schedule_formatBar'></tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</div>

HTML滚动表 - 锁定列

0 个答案: