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

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

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
いつかのこと

おすすめ

かんれん

【CSS】レスポンシブ対応の三角形を作る

みる

【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）

みる

【CSS】吹き出しをつくる、三角の部分をちょっと曲げて素敵にする

みる

【CSS】背景（background）を2色にする

みる

Googleさんのおすすめ

人気記事

【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）

みる

【jQuery】スライダープラグイン「slick」実装サンプル集

みる

【jQuery】アコーディオン実装サンプル10選

みる

【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）

みる

more

Googleさんのおすすめ

デザインの記事

mono°goen°
  • 2022.01.13New
  • mono°goen°
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
mono°goen°
  • 2022.01.13New
  • mono°goen°
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
あったらいいなと思うもの／窓の家と生活
『未来のミライ』、何度も見てしまう