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

どもども!PCゲーム情報ブロガーのヨッチです。( miraiyotch

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よりも、ずっと快適に使うことができるでしょう!

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