横スクロール対応テーブルを作る方法
横スクロール対応テーブルを作る方法を紹介します。このサンプルでは、10列ある横長のテーブルに横幅を設定し、表示領域に収まらない場合に横方向へスクロールして内容を確認できるテーブルを作成します。列数の多いテーブルでも各セルの文字を折り返さずに表示できるため、テーブルの構成を保ったまま横方向の情報を確認できます。
サンプルでは、テーブルにmin-width:1400px;を設定して一定の横幅を確保し、各セルにはwhite-space:nowrap;を指定して文字の折り返しを防いでいます。さらに、テーブルを囲む要素へoverflow-x:auto;を設定することで、テーブルの横幅が表示領域を超えた場合に横スクロールできるようにしています。JavaScriptは使用せず、HTMLとCSSだけで実装できます。
横スクロール対応テーブルは、商品比較表や料金表、スペック一覧、スケジュール表、会員一覧、管理画面のデータ一覧など、多くの列をまとめて表示したい場面に利用できます。HTMLでは「項目名」「内容」「分類」「状態」などの見出しや各セルの内容を変更でき、CSSではテーブルの最小横幅、セルの余白や枠線、見出し行の背景色などを調整できます。PCだけでなく表示領域の狭い画面でも、横方向へスクロールしながらテーブル全体の内容を確認できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
| 項目名 | 内容 | 分類 | 状態 | 担当 | 開始日 | 終了日 | 優先度 | 進捗 | 備考 |
|---|---|---|---|---|---|---|---|---|---|
| 項目A | サンプル内容A | 分類A | 確認中 | 担当A | 2026/06/01 | 2026/06/10 | 高 | 60% | 備考A |
| 項目B | サンプル内容B | 分類B | 完了 | 担当B | 2026/06/03 | 2026/06/12 | 中 | 100% | 備考B |
| 項目C | サンプル内容C | 分類C | 未対応 | 担当C | 2026/06/05 | 2026/06/15 | 低 | 0% | 備考C |
テーブルの横幅が表示領域を超えると横方向へスクロールできます。横へスクロールして、「項目名」から「備考」までのすべての列を確認できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードを指定 -->
<meta charset="UTF-8">
<!-- 表示幅を端末に合わせる -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>横スクロール対応テーブル</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 横スクロール用の外枠 -->
<div class="table-horizontal-scroll_wrap">
<!-- 横幅が広いテーブル本体 -->
<table class="table-horizontal-scroll_table">
<thead>
<tr>
<th>項目名</th>
<th>内容</th>
<th>分類</th>
<th>状態</th>
<th>担当</th>
<th>開始日</th>
<th>終了日</th>
<th>優先度</th>
<th>進捗</th>
<th>備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>項目A</td>
<td>サンプル内容A</td>
<td>分類A</td>
<td>確認中</td>
<td>担当A</td>
<td>2026/06/01</td>
<td>2026/06/10</td>
<td>高</td>
<td>60%</td>
<td>備考A</td>
</tr>
<tr>
<td>項目B</td>
<td>サンプル内容B</td>
<td>分類B</td>
<td>完了</td>
<td>担当B</td>
<td>2026/06/03</td>
<td>2026/06/12</td>
<td>中</td>
<td>100%</td>
<td>備考B</td>
</tr>
<tr>
<td>項目C</td>
<td>サンプル内容C</td>
<td>分類C</td>
<td>未対応</td>
<td>担当C</td>
<td>2026/06/05</td>
<td>2026/06/15</td>
<td>低</td>
<td>0%</td>
<td>備考C</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでは「項目名」「内容」「分類」「状態」「担当」「開始日」「終了日」「優先度」「進捗」「備考」の10列を持つテーブルを作成します。CSSではテーブル本体に最小横幅を設定し、テーブルを囲む外枠に横スクロールを設定します。表示領域よりテーブルの横幅が大きくなった場合でも、表の列を縮めずに横方向へスクロールして内容を確認できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlは横スクロール対応テーブルを構成するファイルです。「項目名」「内容」「分類」「状態」「担当」「開始日」「終了日」「優先度」「進捗」「備考」の見出しと、項目Aから項目Cまでのデータを記述しています。見出しや各セルの内容を変更したり、tbody内のtr要素を追加・削除してデータ行の数を変更したりできます。
style.cssはテーブルの横幅と横スクロール、セルのデザインを設定するファイルです。テーブルを囲む.table-horizontal-scroll_wrapにoverflow-x:auto;を設定し、テーブル本体にはmin-width:1400px;を指定しています。また、見出しセルとデータセルにはwhite-space:nowrap;を設定し、セル内の文字を折り返さずに表示します。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、2つのファイルを同じ階層へ保存します。index.htmlでは同じ階層にあるstyle.cssを読み込む構成になっているため、配置後にsample/index.htmlをブラウザで開くと横スクロール対応テーブルが表示されます。テーブルの横幅が表示領域を超えている場合は、横方向へスクロールすることで「項目名」から「備考」までのすべての列を確認できます。
カスタマイズできる内容
index.htmlでは、10列の見出しと各データセルの内容を変更できます。tbody内のtr要素を追加するとデータ行を増やすことができ、不要なtr要素を削除すると行数を減らせます。
style.cssでは、横スクロールエリアの最大横幅や余白、テーブル本体の最小横幅、セルの内側余白や枠線、見出し行の背景色などを変更できます。white-space:nowrap;は見出しセルとデータセルの文字を折り返さないための設定です。
数値調整
style.css
max-width:800px;
横スクロールエリアの最大横幅です。値を大きくすると一度に表示できる横方向の範囲が広がり、小さくすると表示範囲が狭くなります。
margin:40px auto;
横スクロールエリアの上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。autoによって左右中央へ配置されます。
padding:24px;
横スクロールエリアの内側余白です。値を大きくするとテーブルと外側との間隔が広がり、小さくすると狭くなります。
min-width:1400px;
テーブル本体の最小横幅です。値を大きくするとテーブル全体がより横長になり、小さくすると横幅が狭くなります。横スクロールさせるために確保するテーブルの横幅を調整できます。
padding:12px;
見出しセルとデータセルの内側余白です。値を大きくすると文字と枠線の間隔が広がり、小さくすると詰まった表示になります。
border:1px solid #d1d5db;
見出しセルとデータセルの枠線です。1pxを大きくすると枠線が太くなり、小さくすると細くなります。
レスポンシブ対応
このサンプルは横スクロールを利用して、表示領域の狭い画面でもテーブルの内容を確認できる構成です。style.cssの.table-horizontal-scroll_wrapにはmax-width:800px;とoverflow-x:auto;を設定し、テーブル本体にはwidth:100%;とmin-width:1400px;を設定しています。テーブルが表示領域より横長になった場合は外枠の中で横スクロールできるため、スマートフォン・タブレット・PCでも10列の内容を横方向へ移動しながら確認できます。
コメント