# table に position: sticky を使ってみた

Tags: CSS HTML

お疲れ様です、ナガです。

担当したプロジェクトで、テーブルの一部のセルを固定表示にしてスクロールさせたいという要件に遭遇したので備忘録です。

なお、SPビューでテーブルの一部を固定表示にさせたかったので、IEは無視しています。

# テーブルの一部のセルを固定させたい

テーブルセルを固定させるのに「TableHeadFixer」などの jQuery プラグインを使うのが定番かと思います。

ただ、今回実装するにあたって、プラグインでは望んでいた動作が実現できず、IEは無視してもOKという条件も重なったので position: sticky を試してみることにしました。

# コードとサンプル

• Github
• DEMO

※ Macの Chrome, Firefox, Safari, iPhone6以降, Android v8以降で確認済み ※ お持ちのスマホで確認してください

# 確認できたバグ

• iPhone6 plus以降で table セルに sticky かけると iPhone 6s plus 以降 太くなる
  • 解決策 table に border-collspace:separate
• iPhone7 以降で スクロールをすると stickyをかけたセルの左のボーダーが消える
  • 解決策 table に border-collspace:separate
• FireFoxで table セルに sticky かけると border消える
  • 解決策 table に border-collspace:separate

# まとめ

だいたいのバグは table に border-collspace:separate をかければ解決します。