マスター参上だ！
今回はテーブルのth（見出し）を固定する方法を紹介していくぞ！
エクセルやスプレッドシートで、テーブルのヘッダーや左端のセルを固定して、スクロールしても追尾するようにすることってできますよね。
今回はなんとそれがcssだけで実現できちゃうぜ、というのを紹介していく記事になります。
最初に「見出しが追尾する」のイメージが沸かない人は下の動画を見てみてください。
こういうのですね。
左端と上部のセルがスクロールしても追尾しています。
スプレッドシートorエクセルは仕事で触っている人も多いんじゃないでしょうか。
この挙動がcssで実現できると知ったのは、実は僕もつい最近です笑
よく見る動きですけど、webで同じようなことをしようという発想がなかったので、発見した時は目から鱗でした。
こういった地味ながら、しかし確実にUX向上に繋がる小技は覚えておいて損はないでしょう。
順を追って分かりやすく説明していきますね！
それではどうぞ
テーブルの行と列を簡単に固定する方法【CSSのみ】
早速ですが下記をご覧ください。
See the Pen BaWdoxg by botanin (@botanin) on CodePen.
スクロールバーを下と右に動かしてみてください。
どうでしょう。
いい感じにヘッダーと左端のセルが固定されていますよね。
追尾を実現させているのは、position:sitcy;というcssです。
順に解説していきます。
①：ヘッダーを固定させる方法
th {
position: sticky;/*←これで追尾させる*/
top: -2px;/*←top:0;だと隙間が開いてしまう為マイナス値で詰める*/
z-index: 2;
text-align: center;
background: #ffd063;
color: #864f08;
box-shadow: 0 4px 0px rgba(0, 0, 0, 0.1);
}thにposition: sticky;を当てることでヘッダーが固定されます。
これだけです笑
めっちゃ簡単ですよね。
またヘッダーを追尾させると、ヘッダーの上にわずかに隙間が開いているのを発見したのでtop:-2px;で詰めています。
②：左端のセルを固定させる方法
tbody {
background: #fff;
tr {
th {
&:first-child {
position: sticky;
left: -2px;
background: #fff6e0;
box-shadow: 4px 0 0px rgba(0, 0, 0, 0.1);
}
}
}
}こっちも一緒ですね。
最初に出現するthにposition: sticky;を当てています。
また、セルを追尾させているとヘッダー同様隙間ができてしまうので、left:-2px;を当てて見えなくさせています。
なぜcssだけでこのような挙動が実現できるのか？
要素は文書の通常のフローに従って配置され、直近のスクロールする祖先および包含ブロック(直近のブロックレベル祖先、表関連要素を含む) に対して
top,right,bottom,leftの値に基づいて相対配置されます。オフセットは他の要素の配置には影響を与えません。
参考：https://developer.mozilla.org/ja/docs/Web/CSS/position
MDN載せときますが、position: sticky;が当たっている要素の親要素が自動的に固定の基準になる、ということですね。
親要素になるには高さを持っていることが条件で、position: sticky;が当たっている要素は、この基準となっている親要素の中であれば上下左右どこであってもひっつく挙動を示してくれます。
ちなみに、この親要素を「スティッキーコンテナ」。position: sticky;が当たっている自身を「スティッキーアイテム」と呼びます。
これは読んで字の通りで、スティッキー（くっつく）要素（アイテム）と、そのアイテムを内包するブロック（コンテナ）ということですね。
次に親要素について詳しくみてみましょう
試しにサンプルをずっと下までスクロールしてみてください。
See the Pen BaWdoxg by botanin (@botanin) on CodePen.
テーブル見切れた瞬間、ヘッダーはついてこなくなりましたよね？
これは、今回の親はtableタグであることを表しています。
tableタグはposition:sticy;が当たっているthから遡って最初に高さを持っているブロックになるので、自動的にスティッキーコンテナ（固定の基準となる親要素）に指定されたことになります。
thの高さに依存しているtrやtheadでは、スティッキーコンテナになり得ないところに注意しましょう。
テーブルの行と列が固定されないんだけど？
これよくハマるところです。
原因は恐らく一つで、祖先の要素にoverflow:hidden;が当たっている可能性があります。
この祖先というのは全てです。
直近の親要素も含めbodyやhtmlまで遡りましょう。
それらのどこかにoverflow:hidden;が当たっているだけでposition:sticy;は効かなくなります。
効かない時は真っ先に疑ってみてくださいね。
まとめ
いかがだったでしょうか。
cssでいとも簡単にセルを固定することができましたね。
ある程度の大きさのテーブルで真価を発揮すると思うので、使用頻度としては高くないと思いますが、覚えておいて損はないと思います。
デザイナー・コーダーの皆さんは、ぜひ機会があったら使ってみてくださいね。
それではまた！
