JavaScript を使用してスクロール テーブルの最初の行と最初の列をロックする方法

次の場合にテーブルの最初の行と最初の列をロックするスクロールは、重要な情報が上部と左側にある大きな表の場合に便利な機能です。 CSS だけではこれを実現できませんが、JavaScript が解決策を提供します。

潜在的な JavaScript ソリューションとして fxdHdrCol プラグインを検討してください。このプラグインは、標準の HTML テーブルを、固定されたテーブル ヘッダーと列を備えたスクロール可能なテーブルに変換します。これにより、最初の行と最初の列を所定の位置に保ちながら、テーブルを水平および垂直にスクロールできます。

fxdHdrCol を使用するには、次のパラメータをプラグインに渡すだけです:

$('#myTable').fxdHdrCol({
    fixedCols    : 3,       /* 3 fixed columns */
    width        : "100%",  /* set the width of the container (fixed or percentage)*/
    height       : 500      /* set the height of the container */
});

fixedCols パラメーターを指定すると、テーブル内の固定列の数を定義できます。テーブルに合わせてコンテナの幅と高さを設定することもできます。

完全なデモとドキュメントについては、元の応答で提供されているリンクを参照してください。このソリューションは、表の最初の行と最初の列を効果的にロックし、よりユーザーフレンドリーなスクロールエクスペリエンスを提供します。