スクロール中に HTML テーブルのヘッダーを固定するにはどうすればよいですか?

スクロールするときに HTML テーブルのヘッダーを固定できますか?

HTML テーブルは、表形式のデータを表示する優れた方法です。ただし、テーブルが長い場合、列ヘッダーを追跡するのが困難になることがあります。これは、テーブルの幅が広く、ヘッダーが画面に表示されない場合に特に当てはまります。

この問題に対処する 1 つの方法は、テーブルがスクロールされても列ヘッダーが表示されたままになるように列ヘッダーを固定することです。これは、さまざまな CSS および JavaScript テクニックを使用して実現できます。

CSS 変換

最新のブラウザのみを考慮する場合は、CSS 変換を使用することで固定ヘッダーをはるかに簡単に実現できます。その仕組みは次のとおりです。

1. テーブル ラッパーにイベント リスナーを追加します。 このリスナーは、テーブルがスクロールされるとトリガーされます。
2. GetラッパーのscrollTop値。 この値は、テーブルがスクロールされたピクセル数を表します。
3. テーブルのヘッダーに変換変換を適用します。 この変換により、テーブルがスクロールされたのと同じピクセル数だけヘッダーが上に移動します。

この手法の JavaScript コードは次のとおりです:

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

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

<div>

#wrap {
    width: 100%;
    height: 400px;
    overflow: auto;
}

th {
    width: 200px;
}

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

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