スクロール可能な Div 内に固定ヘッダー テーブルを作成するにはどうすればよいですか?

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

Web 開発の一般的な課題は、ユーザーが垂直方向にスクロールしても表示されたままになる固定ヘッダーを持つテーブルを作成することです。テーブル本体を通して。この記事では、カスタム CSS ソリューションと JavaScript ベースのソリューションという 2 つのアプローチを使用して、この問題の解決策を検討します。

カスタム CSS ソリューション

カスタム CSS ソリューションは、テーブル ヘッダーを絶対的に配置し、テーブル本体がスクロールしてもその位置を維持することに依存しています。次の CSS を使用できます:

#table-wrapper {
  position: relative;
}

#table-scroll {
  height: 250px;
  overflow: auto;
  margin-top: 20px;
}

#table-wrapper table {
  width: 100%;
}

#table-wrapper table thead th {
  position: absolute;
  top: 0;
  z-index: 2;
  height: 20px;
  width: 35%;
  border: 1px solid red;
}

このメソッドは単にヘッダーを表本体の上に配置し、スクロール中にその上部の位置を維持します。

JavaScript ソリューション

別のアプローチでは、JavaScript を利用してヘッダーを修正し、スクロール動作を処理します。次のコード スニペットは、このアプローチを示しています。

// Get the table and its header
var table = document.getElementById("table");
var header = table.querySelector("thead");

// Clone the header
var cloneHeader = header.cloneNode(true);

// Create a wrapper div for the cloned header
var headerWrapper = document.createElement("div");
headerWrapper.classList.add("header-wrapper");

// Insert the cloned header into the wrapper
headerWrapper.appendChild(cloneHeader);

// Insert the header wrapper into the table
table.insertBefore(headerWrapper, table.firstChild);

// Add event listener for scrolling
table.addEventListener("scroll", function() {
  headerWrapper.style.left = table.scrollLeft + "px";
});

この JavaScript メソッドはヘッダーを複製し、テーブルの上部に固定して配置し、テーブルのスクロールに応じて左の位置を更新してテーブル本体との位置合わせを維持します。 .

どちらのソリューションも、スクロール可能な div 内に固定ヘッダー テーブルを作成する問題に効果的に対処します。どのアプローチを選択するかは、Web プロジェクトの特定の要件と好みによって異なります。

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