全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
テーブルの行や列を固定しスクロールする方法
2023.02.22
※この記事は2023年02月22日時点の情報をもとに作成されました。
こんにちは。コーダーの兼山です。
テーブルをモバイル画面などの小さな範囲で表を見せる際に役立つ、行や列を固定してスクロールさせる方法を紹介します。
- 1. 手順
- 2. 行を固定する
- 3. 列を固定する
- 4. 行・列を固定する
- 5. 列を途中から固定する
- 6. 『position:sticky』が効かないときは？
手順
① 親要素に『overflow:auto』を指定する。
② tableのサイズを親要素より大きくする。
行固定の場合 ⇒ 高さのサイズを親要素より大きくする
列固定の場合 ⇒ 幅のサイズを親要素より大きくする
③ th、tdにwhite-space:nowrapを指定する。
④ 固定させたい要素に「position:sticky」「top:0」「left:0」を指定する。
⑤ モバイルに対しての指定が必要であれば『-webkit-overflow-scrolling: touch;』を親要素へ加える。
行を固定する
列を固定する
行・列を固定する
列を途中から固定する
『position:sticky』が効かないときは？
① 直前の親要素に「overflow:hidden」が指定されていると「position:sticy」が効きません。
遡って確認をしてみましょう。
② 親要素に幅、高さを指定すること。
行固定の場合 ⇒ 高さを指定
列固定の場合 ⇒ 幅を指定
③ 「position: sticky」を指定した要素に top, left 等の位置指定を忘れずに。
まとめ
『position: sticky』を使ったテーブルの一部を固定してスクロールさせる方法を紹介しました。
ユーザーの見易さを実現できる簡単な手法ですので、積極的に使っていきましょう！
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
この記事を読んだ方はこんな記事も読んでいます
こんにちは。コーダーの兼山です。 コーディング時にtableで表を組み込む際、レスポンシブコーディングなどでのスマートフ…
こんにちは。コーダーの兼山です。 前回は、reCAPTCHAを設置するために必要となる、GoogleへWEBサイト登録と…
