CSS と JavaScript を使用して HTML の本文をスクロールするときにテーブルのヘッダーを固定したままにする方法

列ヘッダーが画面上で固定され、テーブル本体と一緒にスクロールしないように長い HTML テーブルを表示するクロスブラウザー CSS/JavaScript テクニックはありますか?

Microsoft Excel では、テーブルの内容をスクロールするときに列ヘッダーを安定させておくために、「ペインの固定」機能をよく使用します。 HTML にも同様のクロスブラウザ手法はありますか?

CSS 変換を使用すると、たった 4 行の JavaScript コードでこれを実行できます。

1. テーブルをコンテナーにラップします。 「wrap」を ID 化し、そのオーバーフロー プロパティを「auto」に設定します。
2. 上で「scroll」イベントをリッスンします。
3. イベント ハンドラー内で、scrollTop プロパティに基づいて変換値を計算します。
4. transform プロパティを使用して、計算された変換値をテーブルの thead 要素に適用します。

このアプローチには次の利点があります。

• 使用するのはわずか 4 行で、クリーンかつ効率的です。 JavaScript。
• 外部 JavaScript の依存関係はありません。
• 固定レイアウトを含むすべてのテーブル構成で動作します。
• Chrome、Safari、Firefox、Edge などの最新のブラウザをサポートします。

こちらですコード:

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

以下は参考のための完全な例です:

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

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

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

// HTML
<div>

以上がCSS と JavaScript を使用して HTML の本文をスクロールするときにテーブルのヘッダーを固定したままにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。