WEBMAN

HTML,CSS,JSでハマった事のメモとWEB制作の実験場

公開日:

table に position: sticky を使ってみた

table に position: sticky を使ってみた

SPONSOR

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

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

なお、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 をかければ解決します。

SPONSOR

この記事をシェアする

コメント

関連記事