Web 上で大規模なデータ セットやテーブル レイアウトに遭遇することがよくあります。 これらのテーブルに数百行のコンテンツが含まれている場合、スクロールを開始すると問題が発生します…

テーブルのヘッダーが消えているのを見てください。 ここで、(たとえば) 項目 #300 までスクロールした場合、各列のデータが何に関連付けられているかを思い出すことができるでしょうか? この表を見るのが初めてであれば、おそらくそうではありません。 幸いなことに、これは少量の CSS で修正できます (冗談ではありません!)。

それをチェックしてください：

かなりすごいですよね？ 魔法のように見えるかもしれませんが、実際に実装するのは非常に簡単です。 2 つの CSS プロパティを追加するだけです。 thead:

position: sticky;
top: 0;

それでおしまい！ 最高のは、 sticky もっている ~96% のグローバルサポート つまり、これは「最先端」のプロパティではなく、大量のブラウザを安全にサポートできるということです。 エンドユーザーのエクスペリエンスが向上することは言うまでもありません。

このテーブルのライブデモは、 CodePen のペンの例。

これが興味深いと思われた場合は、テーブルに焦点を当てた私の他の投稿もお気軽にチェックしてください。 最小限の CSS でテーブルをレスポンシブにする