【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 / 2021.8.20
- 【CSS】打ち消し線（delタグ）をカスタマイズする
- web / 2020.10.27
- 【CSS】tableをレスポンシブ対応する、2列を1列に切り替える
- web / 2018.10.5
- 【CSS】タブレット、スマホ表示の時は:hoverを不要にする
- web / 2019.5.30
- 【CSS】ホバー（マウスオーバー）実装サンプル集（画像の明度を上げる編）
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
- web / 2019.7.22
- 【jQuery】アコーディオン実装サンプル10選
- web / 2021.9.17
- 【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）
- web / 2021.3.30
- 【CSS】シンプルなボタンデザイン実装サンプル集
- web / 2019.7.19
- 【CSS】olのリストで①、②、③（丸数字）を表示させる
- web / 2019.6.18
- 【CSS】背景（background）を2色にする
Googleさんのおすすめ
デザインの記事
- 2021.09.27New
- アンカー市川｜みんなで作る自分の居場所
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2021.09.27New
- アンカー市川｜みんなで作る自分の居場所
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2021.07.07
- あったらいいなと思うもの／窓の家と生活
- あったらいいなと思うもの 緑（観葉植物） ドライフラワー プロジェクター 影が楽しい…
- いつかのこと – 無印良品の家と暮らす
- 2021.06.30
- 『未来のミライ』、何度も見てしまう
- (C)2018 スタジオ地図 もくじ 4歳の男の子と0歳の女の子 好きなセリフ10選 「そりかえ…
- いつかのこと – 無印良品の家と暮らす