【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 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 / 2020.11.1
- 【CSS】使える背景パターン、実装サンプル25選（コピペで簡単です）
- web / 2021.8.20
- 【CSS】打ち消し線（delタグ）をカスタマイズする
- web / 2018.9.3
- 【CSS】セレクタまとめ、最初・最後・奇数・偶数・何番目
- web / 2019.1.24
- 【CSS】吹き出しをつくる
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2021.9.17
- 【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）
Googleさんのおすすめ
デザインの記事
- 2022.08.10New
- SLAM DUNK Talkin’ to the Rim 2
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.08.10New
- SLAM DUNK Talkin’ to the Rim 2
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2022.06.04
- 『点』、登場人物は3人だけ
- (C)2017 WARNER MUSIC JAPAN INC. もくじ 『点』 登場人物は3人だけ なんとも心地よい …
- いつかのこと – 無印良品の家と暮らす