CSSだけで実装できるとは！テーブルのヘッダと左端のセルの両方を固定させるCSSの極上テクニック

テーブルのヘッダを上部に固定するのは、position: sticky;で簡単に実装できます。ヘッダだけでなく、テーブルの左端のセルも固定させたい場合は、どう実装すればよいでしょうか？

JavaScriptがないと実装できないように思うかもしれませんが、position: sticky;を効果的に使用することで実装できます。テーブルのヘッダと左端のセルの両方を固定させるCSSのテクニックを紹介します。

A table with both a sticky header and a sticky first column

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

tableのセル、thやtdをposition: sticky;させることはこの記事で解説しました。テーブルのヘッダを上部にくっつけて固定させるのは簡単です（デモページ）。

しかし、position: sticky;はスクリーンの上部にくっつけるだけではありません。スクロールの方向を問わずくっつけることができます（水平方向も楽しいですよ）。実際、同じ要素の中に複数の方向にくっつけたり、単一の要素を複数の方向にくっつけることもできます。

テーブルのヘッダと左端のカラムをくっつけたデモをご覧ください。

See the Pen
Table with Sticky Header and Sticky First Column by Chris Coyier (@chriscoyier)
on CodePen.

どうしてこれが必要なのか？
表形式のデータの場合、クロスリファレンスが重要なポイントになります。このテーブルは野球のスコア表で、チーム名とイニング数がスクロールしてしまうと、何をみているのか分からなくなってしまうので、この実装は理にかなっていると言えます。

実装のポイントはposition: sticky;の使い方です。重複する要素をどのように処理する必要があるかということです。

テーブルのセルでスティッキーを使用する場合には、背景が必要です。また、適切なz-indexの処理も必要で、セルが固定されたときに、上にくるべきものの上にくるようにします。これが最も難しいところだと思います。

• tbody>thのセルが通常のテーブルセルの上にあることを確認して、水平スクロール時に一番上にくるようにします。
• thead>thのセルは、垂直スクロール時に一番上にくるようにします。
• thead>th:first-childのセルは、最も上にあることを確認してください。これは水平スクロール時にボディのセルとその兄弟であるヘッダよりも上にある必要があります。

主要なコードは、下記のようになります。

このことをメールで教えてくれたCameron Clarkのデモページは、非常にクールです。また、Estelle Weylが数年前につくったデモページは常に私より数年先を行っています。