CSS 変換を使用して HTML テーブルに固定ヘッダーを作成する方法

固定ヘッダーを備えた HTML テーブル?

大きな HTML テーブルでは、ページの都合上、行と列をすばやく参照することが困難になりますスクロール。 Microsoft Excel の「ペインの固定」機能と同様に、列ヘッダーを表の上部に固定すると便利です。

最新のブラウザ用の CSS 変換

最新のブラウザの場合、CSS 変換は簡単な解決策を提供します。既存の HTML や CSS を変更せずに、わずか 4 行のコードで固定ヘッダーを実装できます。

document.getElementById("wrap").addEventListener("scroll", function() {
  var translate = "translate(0," + this.scrollTop + "px)";
  this.querySelector("thead").style.transform = translate;
});

このコードは、スクロール イベント リスナーをコンテナ要素 (この例では「wrap」) に追加し、動的に追加します。表の垂直スクロール位置と一致するように、表の先頭 (「thead」) の CSS 変換を更新します。これにより、ヘッダーが表の上部に固定されたままになり、本文が下にスクロールできるようになります。

<div>

完全な例以下は、これを示す完全な例です。テクニック:

以上がCSS 変換を使用して HTML テーブルに固定ヘッダーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。