CSSだけでTABLEのヘッダーを固定してスクロールする方法【スマホ対応】

ヨッチヨッチ

こんにちは。代表のヨッチです。
ミライヨッチにお越しいただき、ありがとうございます。

HTMLでTABLE（一覧表）を作っているときに、ヘッダーを固定したいと思ったことはありませんか？
しかもCSSだけで実装できるなら、動作も快適でメンテナンスしやすいですよね！

この記事では、CSSだけでTABLEのヘッダーを固定してスクロールする方法を紹介しています。
見た目のサンプルもあるし、もちろんスマホにも対応しています。

レスポンシブのサイトでも使えるので、まさに今の時代に合った方法といえるでしょう！

【CSSのみ】TABLEのヘッダーを固定してスクロールする方法

それでは、さっそくCSSだけでヘッダーを固定していきましょう！
サンプル・HTML・CSSを用意したので、まずはサンプルからチェックしてみてください。

サンプル・HTML・CSSのソースコード

  • サンプル
  • HTML
  • CSS
  • 固定あり 固定なし 固定なし
    固定あり テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト
    固定あり テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト 
  • <div class="table-scroll">
<table style="width: 850px;">
	<thead>
		<tr>
			<th class="sticky">固定あり</th>
			<th>固定なし</th>
			<th>固定なし</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th class="sticky">固定あり</th>
			<td>テキストテキストテキストテキストテキストテキスト</td>
			<td>テキストテキストテキストテキストテキストテキスト</td>
		</tr>
		<tr>
			<th class="sticky">固定あり</th>
			<td>テキストテキストテキストテキストテキストテキスト</td>
			<td>テキストテキストテキストテキストテキストテキスト</td>
		</tr>
	</tbody>
</table>
</div>
  • /* .table-scrollに適用 */
.table-scroll {
	margin: 3em 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.table-scroll table {
	margin: 0;
}

/* .stickyに適用 */
.table-scroll .sticky {
	border-left: none;
}
.table-scroll .sticky {
	position: -webkit-sticky;
	position: sticky;
	left: 0;
	z-index: 1;
}

こんな感じで、左側のヘッダーを固定して表示しています。
すべてCSSだけで実装できるので、軽くてメンテナンスしやすいのが特徴です。

HTMLソースコードの解説

それでは、ソースコードを解説していきます。

<div>・<table>について

HTMLでは、<div>タグの中に<table>タグを入れて、class･styleを付けています。

<div class="table-scroll">
<table style="width: 850px;">
</table>
</div>

divには、専用のclassを付けてください。

tableのstyleには、固定したい幅を指定してください。
min-widthを指定して、最大幅をレスポンシブにすることも可能です。

<th>について

次に、固定したいヘッダー<th>タグに、専用のclassを付けてください。

<th class="sticky">固定あり</th>

<div>・<table>・<th>タグにclassやstyleを付けたら、他は通常のTABLEと同じです。

CSSソースコードの解説

CSSのソースコードは、特に解説することはありません。
コピー&ペーストで、そのまま使えるようになってます。

あえて説明するなら、こんな感じです。

.table-scroll

.table-scroll {
	margin: 3em 0;
}

テーブルの上下にマージンを指定しています。
お好きな間隔を指定してください。

.sticky

.table-scroll .sticky {
	border-left: none;
}

横にスクロールしたときに、文字がはみ出すのを防いでいます。
文字がはみ出しても問題なければ、borderを付けてもOKです。

【まとめ】ヘッダーを固定して見やすい一覧表を作ろう！

ヘッダーを固定することで、横に長い一覧表でもグッと見やすくなります。

特にスマホやタブレットでは、ヘッダーが見えることで使い勝手もだいぶ違います。
より見やすいサイトを目指すなら、ぜひ導入したい機能です。

CSSで実装すれば、「軽い・メンテナンスしやすい・動作が安定する」というメリットもあります。
Javascriptよりも、ずっと快適に使うことができるでしょう！

まずはお試しで使ってみて、良さそうなら本格的に実装してみてはどうでしょうか？