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

  • 2021.2.24
きのこさん
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;』の対応ブラウザは下記サイトで確認できます。

Can I use

IEの場合は『Polyfill』を使えば問題なし

まずは『Polyfill』に必要なファイルを下記サイトからダウンロードします。

stickyfill

ダウンロードファイルの中で必要なファイルは以下の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);
});

さいごに

きのこさん
ふむふむ
きのこさん
ふむふむ

関連記事

【CSS】簡単に固定できるposition: sticky;の実装サンプル集

【jQuery】スクロール途中から追尾(fixed)、指定位置(class)で消える

デザインのこと - Web design gallery
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

アンカー市川|みんなで作る自分の居場所
アンカー市川|みんなで作る自分の居場所
あったらいいなと思うもの/窓の家と生活
『未来のミライ』、何度も見てしまう