table に position: sticky を使ってみた

投稿日:2018年07月14日

Tags: CSS HTML

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

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

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

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

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

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

コードとサンプル

※ 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

まとめ

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

  • シェア:

Last Updated: 2019-9-9 21:37:59