0

Excelでできることと同様に、HTMLテーブルの列を本質的に「凍結」しようとしています。ただし、両方向にスクロールできる必要があります。私は現在、垂直方向にスクロール可能な div を使用してテーブルを保持することでこれを実行しようとしています。左側には名前のリストが保持され、右側にはそれらの名前に関連するデータを含む水平方向にスクロール可能な div が保持されます。これらにはそれぞれ、列のタイトル データを保持するための固定 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>
4

0 に答える 0