【CSS】テーブルの行(列)を固定してスクロールする
- 2021.2.24
- CSS


tableの項目を固定したいのですがー

うーん、こんな感じだったらできますよー
もくじ
tableの行を固定してスクロールする
See the Pen
【CSS】テーブル(table)の行を固定してスクロールする by 125naroom (@125naroom)
on CodePen.
HTMLとCSSはこちら
HTML
<table> <tr> <th class="_sticky">固定くん</th> <th class="_sticky">固定くん</th> <th class="_sticky">固定くん</th> </tr> <tr> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> </table>
CSS
._sticky:before(擬似要素)を使ってスクロール時の枠線の補助をしています。
外すと崩れがでますので一度外してみるのをおすすめします。(何かが見えます。。)
table { border-collapse: collapse; border-spacing: 0; width: 100%; } th, td { vertical-align: middle; padding: 20px 15px; border: 1px solid #ccc; font-size: 14px; text-align: center; } th { color: #fff; background: #795548; } ._sticky { position: sticky; top: 0; } ._sticky:before { content: ""; position: absolute; top: -1px; left: -1px; width: 100%; height: 100%; border: 1px solid #ccc; }
tableの列を固定してスクロールする
See the Pen
【CSS】テーブル(table)の列を固定してスクロールする by 125naroom (@125naroom)
on CodePen.
HTMLとCSSはこちら
HTML
<div class="scroll-box"> <table> <tr> <th class="_sticky">固定くん</th> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <th class="_sticky">固定くん</th> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <th class="_sticky">固定くん</th> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> </table> </div>
CSS
._sticky:before(擬似要素)を使ってスクロール時の枠線の補助をしています。
外すと崩れがでますので一度外してみるのをおすすめします。(何かが見えます。。)
/*=========== .scroll-box ===========*/ .scroll-box { overflow-x: auto; padding-bottom: 10px; -webkit-overflow-scrolling: touch; } /*=========== scrollbar ===========*/ /*スクロールバー全体の高さ*/ .scroll-box::-webkit-scrollbar { height: 4px; } /*スクロールバー全体の背景*/ .scroll-box::-webkit-scrollbar-track { background: #eee; } /*スクロールバーの動く部分*/ .scroll-box::-webkit-scrollbar-thumb { background: #aaa; border: none; } /*スクロールバーの動く部分のホバー(マウスオーバー)*/ .scroll-box::-webkit-scrollbar-thumb:hover { background: #999; } /*=========== table ===========*/ .scroll-box table { min-width: 600px; } table { border-collapse: collapse; border-spacing: 0; width: 100%; } th, td { vertical-align: middle; padding: 20px 15px; border: 1px solid #ccc; font-size: 14px; text-align: center; } th { color: #fff; background: #795548; } ._sticky { position: sticky; left: 0; } ._sticky:before { content: ""; position: absolute; top: -1px; left: -1px; width: 100%; height: 100%; border: 1px solid #ccc; }
tableの行と列を固定してスクロールする
うーん、実装してみましたが、ダメですね。
ちょっとこれは宿題にします。
(実用性あるかな、ん、ないかな、はてさて)
See the Pen
【CSS】テーブル(table)の行と列を固定してスクロールする by 125naroom (@125naroom)
on CodePen.
HTMLとCSSはこちら
HTML
<table> <tr> <th class="_sticky z-02">固定くん</th> <th class="_sticky">固定くん</th> <th class="_sticky">固定くん</th> <th class="_sticky">固定くん</th> <th class="_sticky">固定くん</th> <th class="_sticky">固定くん</th> <th class="_sticky">固定くん</th> <th class="_sticky">固定くん</th> <th class="_sticky">固定くん</th> </tr> <tr> <th class="_sticky">固定くん</th> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <th class="_sticky">固定くん</th> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <th class="_sticky">固定くん</th> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <th class="_sticky">固定くん</th> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <th class="_sticky">固定くん</th> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <th class="_sticky">固定くん</th> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> </table>
CSS
._sticky:before(擬似要素)を使ってスクロール時の枠線の補助をしています。
外すと崩れがでますので一度外してみるのをおすすめします。(何かが見えます。。)
table { border-collapse: collapse; border-spacing: 0; width: 100%; min-width: 1000px; } th, td { vertical-align: middle; padding: 20px 15px; border: 1px solid #ccc; font-size: 14px; text-align: center; } th { color: #fff; background: #795548; } ._sticky { position: sticky; top: 0; left: 0; z-index: 1; } ._sticky:before { content: ""; position: absolute; top: -1px; left: -1px; width: 100%; height: 100%; border: 1px solid #ccc; } ._sticky.z-02 { z-index: 2; } /*=========== common ===========*/ body { font-family: YuGothic, "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif; font-size: 14px; letter-spacing: .025em; line-height: 1.8; padding: 0; margin: 0; } section { max-width: 100%; margin: 0 auto; padding: 50px 10px; background: #fff; } section p._a { padding: 0 10px; margin: 50px 0 0; } section p._a .link { display: inline-block; color: #111; padding-left: 1.3em; text-indent: -1.3em; } section p._a .link:before { content: ''; display: inline-block; width: 5px; height: 5px; border-top: 2px solid #111; border-right: 2px solid #111; transform: rotate(45deg); margin-right: 10px; }
制作メモ
ベンダープレフィックスはSafari用に『-webkit-』が必要です。
対応ブラウザ
『position: sticky;』の対応ブラウザは下記サイトで確認できます。
IEの場合は『Polyfill』を使えば問題なし
まずは『Polyfill』に必要なファイルを下記サイトからダウンロードします。
ダウンロードファイルの中で必要なファイルは以下の1点です。
- stickyfill.min.js
HTML
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/stickyfill.min.js"></script>
JS
$(function() { var elements = document.querySelectorAll('.sticky'); Stickyfill.add(elements); });
さいごに

ふむふむ

ふむふむ
関連記事
おすすめ
かんれん
- web / 2021.2.12
- 【CSS】background-colorを透過する時の備忘録(IE11対策)
- web / 2019.9.26
- 【CSS】input、textareaのCSSを初期化する(iOS対策)
- web / 2021.2.24
- 【CSS】テーブルの行(列)を固定してスクロールする
- web / 2019.7.19
- 【CSS】olのリストで①、②、③(丸数字)を表示させる
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
- web / 2021.9.17
- 【jQuery】ページ内リンクでスムーズスクロール(スクロール位置の調整も簡単にできる)
Googleさんのおすすめ
デザインの記事
- 2023.01.25New
- good eighty%
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2023.01.25New
- good eighty%
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2022.06.04
- 『点』、登場人物は3人だけ
- (C)2017 WARNER MUSIC JAPAN INC. もくじ 『点』 登場人物は3人だけ なんとも心地よい …
- いつかのこと – 無印良品の家と暮らす