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;させることはこの記事で解説しました。テーブルのヘッダを上部にくっつけて固定させるのは簡単です（デモペ

[coliss]

JavaScriptは無し、テーブルのヘッダと左端のセルの両方を固定させるCSSのテクニック。

[Silica]

これよくやるけどChromeだとborderに問題あるんだよね。

[misarine3]

ブラウザ対応どうなってるんや…あとで調べた方がいいのかな

[piayo]

cssだけでできるのか...すげ。

[nelpesica]

[][テーブル][セル][固定]

[mysql8]

スクロールバーがヘッダを含むのは...

[Shinwiki]

テーブルを書く用途ならtableタグ使って良いんだな……絶対悪みたいに思ってグリッドとかで苦慮してたわw

[spark7]

実装は特に変わったことしてない。左上のマスを一番z-index高くしてleftとtopでstickyさせるのが肝ぽい。

[wkwkhautbois]

これを実現させたいという要件のとき、セットでIE11対応を求められる。業務システムらしさのある見た目なので。

[renos]

ほえーCSSだけで実現できるのか

[maidcure]

ブラウザの実装状況的に、まだ実用には早いかな

[Helfard]

面白い。

[masakuma0812]

［対応］［ユーザビリティ］［レスポンシブ］［コード］