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

ヘッダーが固定された HTML テーブル

問題ステートメント

列ヘッダーが画面上に固定されたままの HTML テーブルを作成する表の内容をスクロールすると、これは、Microsoft Excel の「ペインの固定」機能を模倣しています。

最新のブラウザのソリューション

CSS 変換を使用すると、最新のブラウザではヘッダーを簡単に修正できます。

1. テーブルの「thead」の「transform」プロパティを設定します。 element.
2. 現在のscrollTop値によって変換します。
3. 含まれる要素(「#wrap」)の「scroll」イベントをリッスンします。

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

サポートと例

CSS 変換は Internet Explorer を除いて広くサポートされています8-.

完全な例は次のとおりです:

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

#wrap {
  overflow: auto;
  height: 400px;
}

td {
  background-color: green;
  width: 200px;
  height: 100px;
}

<div>

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