スクロール可能なhtmlテーブルにヘッダーを固定する方法

を組み込む方法とスクロール可能なテーブルボディの両方を組み込むことは、Webアプリケーションで共通の要件になります。ただし、効果的なソリューションを見つけることは困難です。このガイドでは、この問題の解決策を調査し、実装を通してあなたを案内します。テクニック。人気のあるソリューションは、ダブルスロールとして知られる手法を採用することです。これには、2つのネストされたテーブルの作成が含まれます。固定ヘッダーとテーブル本体のスクロール可能な内側のテーブルを含む外側のテーブル。テーブルの場合：

/ *外側のテーブル（ヘッダーを固定） */ ＃アウターテーブル{ 幅：100％; 高さ：100px; / *ヘッダーの固定高さを設定 */ オーバーフロー：隠し; } / *内側のテーブル（スクロール可能なボディ） */ ＃インナーテーブル{ 高さ：calc（100％-100px）; / *外側のテーブルの高さに基づいて高さを計算します */ オーバーフロー-Y：スクロール; }

次に、JavaScriptを使用して内側のテーブルの高さを動的に調整します： '）; const Innertable = document.getElementById（ 'Inner-Table'）; //外側のテーブルの高さに基づいて内側のテーブルの高さを計算します Innertable.style.height = `$ {outertable.clientheight -100} px`;

例&&&]

/* Outer table (fixed header) */
#outer-table {
  width: 100%;
  height: 100px; /* Set a fixed height for the header */
  overflow: hidden;
}

/* Inner table (scrollable body) */
#inner-table {
  height: calc(100% - 100px); /* Calculate the height based on the outer table's height */
  overflow-y: scroll;
}