0

テーブルに大量のデータを含むフォームを作成しようとしています。現在、ヘッダー バーを修正しようとしていますが、その方法がわかりません。問題は、テーブルの左側と上部の両方に固定行が必要なことです。いくつかのコードが以下に含まれていますが、主なアイデアは、2 つのセルのテーブルを含む垂直方向にスクロール可能な div があることです (1 つは y 軸のリストを保持し、もう 1 つは関連するデータを保持します)。この表の右側のセルは水平方向にスクロール可能で、タイトル バーも一緒にスクロールします (ただし、左側のセルのタイトル バーはスクロールしません)。基本的に、垂直方向にスクロールすると領域の上部に留まるタイトル バーが必要ですが、(一番左のセルを除いて) 水平方向にスクロールするとテーブルと共にスクロールします。任意の入力をいただければ幸いです。

<div id='am_verticalScrollerDiv' style='height: 440px; overflow-y: auto;'>
    <table id='am_verticalScrollerLayoutTable' height='100%'  width='100%' border='0' cellpadding='0' cellspacing='0'>
        <tr>
            <td id='am_resourceListCell' valign='top'>
                <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' align='right'>
                <div id='am_horizScrollDiv' style='width:900px; overflow-x: auto;'>
                    <div id='am_schedDataTitleBarDiv' style='min-width: 900px;'>
                        <table id='am_schedDataTitleBarTable' width='100%' border='0' cellpadding='0' cellspacing='0'>
                            <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>

(すべてのデータは JQuery 経由で挿入されます)

4

0 に答える 0