【CSS】ヘッダーを固定して横スクロールできる表を作成する方法

最近、おすすめ記事を作成するときによく使用している商品名やサービス名を固定して、横スクロールできる表をCSSだけを使用して作る方法と備忘録としてまとめておきます。

まずは横スクロールできる表の完成品から。

以下のような、よくおすすめ人気ランキングの記事に設置されているヘッダーが固定され横スクロールできる表が作成できます。

CSSだけで横スクロールできる表（テーブル）を作成する方法

まずは通常のテーブルを横スクロールできる表にする方法から。通常は横に長い表は記事幅に合わせて調整されて、以下のように縦長となってしまいます。

スクロール設定していない表のサンプル↓

商品名	項目①	項目②	項目③	項目④	項目⑤	項目⑥	項目⑦	項目⑧	項目⑨	項目⑩
商品名①	サンプル	サンプル	サンプル	サンプル	サンプル	サンプル	サンプル	サンプル	サンプル	サンプル
商品名②	サンプル	サンプル	サンプル	サンプル	サンプル	サンプル	サンプル	サンプル	サンプル	サンプル
商品名③	サンプル	サンプル	サンプル	サンプル	サンプル	サンプル	サンプル	サンプル	サンプル	サンプル

デザイン性も、視認性も悪いので、横スクロールを追加して整えていきます。

記載するのはHTMLとCSSだけです。以下の2点だけです。

• HTML：<table>タグに<div>でclass指定をする
• CSS：横スクロール用のCSSを追加する

意外と簡単にできます。

① HTMLに<div>でclass指定する

スクロール対応させたい表の<table>タグに<div>でclassを指定します。

class名は分かりやすく <div class=”table-scroll”> などで良いでしょう。閉じタグ</div>もお忘れなく。

【HTML】
<div class="table-scroll"> /* 横スクロール */
<table>
<tbody>

<tr>
<th>商品名</th>
<th>項目①</th>
<th>項目②</th>
<th>項目③</th>
<th>項目④</th>
<th>項目⑤</th>
<th>項目⑥</th>
<th>項目⑦</th>
<th>項目⑧</th>
<th>項目⑨</th>
<th>項目⑩</th>
</tr>

<tr>
<th>商品名</th>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
</tr>

<tr>
<th>商品名</th>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
</tr>

<tr>
<th>商品名</th>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
</tr>

</tbody>
</table>
</div> /* 横スクロール　閉じタグを忘れずに！ */

② 横スクロール用のCSSを追加する

続いては指定したclassにCSSを追加します。cssファイルもしくはWordPressの場合は、カスタムCSSに記載します。

追加するものは「overflow-x: scroll; 」と「white-space: nowrap;」です。

overflow-xは、要素の内容が左右の境界からはみ出た場合に、どのように表示するのかを設定するプロパティです。今回はスクロールさせたいので「overflow-x: scroll; 」と設定します。

また、white-spaceは、自動改行に関するプロパティーです。初期値では自動的に折り返しをして表示されます。こちらは何も設定しなくても良いのですが、個人的には改行せずに個別で改行を加えた方が綺麗になるので、自動改行をさせない「white-space: nowrap;」を設定しています。

実際に追加すると以下の通りです。

【CSS】
/*テーブル横スクロール*/
.table-scroll{
   overflow-x: scroll;
   white-space: nowrap;
}

これで以下のような横スクロールできる表が完成します。

この状態でも良いのですが、横スクロールするとヘッダーが画面外にスクロールされてしまうので、何の要素を見ているか分かりづらいです。

そこで、ヘッダーを固定するための調整をしていきます。

CSSだけでヘッダーを固定して横スクロールできる表（テーブル）を作成する方法

上記で説明した横スライドの設定ができていれば、ヘッダー固定は

• <table>の<th>にclassを指定する
• CSSを追加する

この2つで完成します。早速やり方を見ていきましょう。

① <table>の<th>にclassを指定する

固定したい列や行のヘッダー<th> にclassを指定します。今回class名は「table-sticky」としています。

以下のサンプルだと、商品名にあたる<th>が固定の対象です。

<div class="table-scroll">
<table>
<tbody>

<tr>
<th class="table-sticky">商品名</th>
<th>項目①</th>
<th>項目②</th>
<th>項目③</th>
<th>項目④</th>
<th>項目⑤</th>
<th>項目⑥</th>
<th>項目⑦</th>
<th>項目⑧</th>
<th>項目⑨</th>
<th>項目⑩</th>
</tr>

<tr>
<th class="table-sticky">商品名①</th>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
</tr>

<tr>
<th class="table-sticky">商品名②</th>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
</tr>

<tr>
<th class="table-sticky">商品名③</th>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
</tr>

</tbody>
</table>
</div>

② CSSを追加する

続いてはCSSを追加します。

「position: sticky;」「left: 0;」「z-index: 1;」は必須項目です。その他は、表のデザイン的な意味で設定しています。お好みで調整してください。

/* ヘッダー固定 */
th.table-sticky {
   position: sticky; /* 必須 */
   left: 0; /* 必須 */
   z-index: 1; /* 必須 */

   border: 1px solid #ddd; /* ボーダー設定 */
   text-align: left; /* テキストの左寄せ */
   background: #f7f7f7; /* 背景色 */
}

これで横スクロールでヘッダーが固定される以下のような表の完成です。

【コピペ用】ヘッダーを固定して横スクロールできる表（テーブル）を作成するためのHTMLテンプレートとCSS

解説を入れながら分割して紹介してきましたが、最後に今回ご紹介したHTMLとCSSをコピペして使用できるようにまとめて記載しておきます。ぜひご利用ください。

【HTML】
<div class="table-scroll">
<table>
<tbody>

<tr>
<th class="table-sticky">固定ヘッダー</th>
<th>項目①</th>
<th>項目②</th>
<th>項目③</th>
<th>項目④</th>
<th>項目⑤</th>
<th>項目⑥</th>
<th>項目⑦</th>
<th>項目⑧</th>
<th>項目⑨</th>
<th>項目⑩</th>
</tr>

<tr>
<th class="table-sticky">固定ヘッダー</th>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
</tr>

<tr>
<th class="table-sticky">固定ヘッダー</th>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
</tr>

<tr>
<th class="table-sticky">固定ヘッダー</th>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
</tr>

</tbody>
</table>
</div>

【CSS】
/*テーブル横スクロール*/
.table-scroll{
   overflow-x: scroll;
   white-space: nowrap;
}

/* ヘッダー固定 */
th.table-sticky {
   position: sticky; /* 必須 */
   left: 0; /* 必須 */
   z-index: 1; /* 必須 */
   border: 1px solid #ddd; /* ボーダー設定 */
   text-align: left; /* テキストの左寄せ */
   background: #f7f7f7; /* 背景色 */
}