固定ヘッダーを持つスクロール可能な HTML テーブルを作成するには?

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

固定テーブル ヘッダーとスクロール可能なテーブル本体の両方を組み込むことは、Web アプリケーションの一般的な要件となる場合があります。ただし、効果的な解決策を見つけるのは難しい場合があります。このガイドでは、実装を通じてこの問題の解決策を検討します。

解決策

この機能を実現するには、CSS と JavaScript の組み合わせを利用できます。テクニック。一般的な解決策は、ダブルスクロールとして知られる技術を使用することです。これには、2 つのネストされたテーブルの作成が含まれます。1 つは固定ヘッダーを含む外部テーブル、もう 1 つはテーブル本体のスクロール可能な内部テーブルです。

CSS セットアップ

最初に、CSS スタイルを定義します。テーブルの場合:

/* 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;
}

JavaScriptセットアップ

次に、JavaScript を使用して内部テーブルの高さを動的に調整します。

const outerTable = document.getElementById('outer-table');
const innerTable = document.getElementById('inner-table');

// Calculate the inner table's height based on the outer table's height
innerTable.style.height = `${outerTable.clientHeight - 100}px`;

例

実際の例については、を参照してください。次のコード サンプルを参照してください:

このソリューションは、テーブル ヘッダーを効果的にフリーズします。テーブル本体をスムーズにスクロールできるようになります。これらの手法を実装することで、特定の要件を満たす応答性の高い対話型のテーブルを作成できます。

以上が固定ヘッダーを持つスクロール可能な HTML テーブルを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。