HTMLのtableタグでテーブル(表)を作成した際、画面サイズが小さい時(スマホでの表示など)にテーブルが潰れてしまって見難くなってしまった事はありませんか?
そんな時に使える、テーブルを横スクロールさせる方法を知っておくと便利です。
tableを作成し、親要素で囲む
まずはHTMLで横スクロールさせたいテーブルを作成し、div等の親要素で囲みます。
<div class="table_wrap">
<table>
<tbody>
<tr>
<th>見出しサンプル</th>
<td>サンプルテキストサンプルテキスト</td>
<td>サンプルテキストサンプルテキスト</td>
<td>サンプルテキストサンプルテキスト</td>
</tr>
<tr>
<th>見出しサンプル</th>
<td>サンプルテキストサンプルテキスト</td>
<td>サンプルテキストサンプルテキスト</td>
<td>サンプルテキストサンプルテキスト</td>
</tr>
<tr>
<th>見出しサンプル</th>
<td>サンプルテキストサンプルテキスト</td>
<td>サンプルテキストサンプルテキスト</td>
<td>サンプルテキストサンプルテキスト</td>
</tr>
<tr>
<th>見出しサンプル</th>
<td>サンプルテキストサンプルテキスト</td>
<td>サンプルテキストサンプルテキスト</td>
<td>サンプルテキストサンプルテキスト</td>
</tr>
</tbody>
</table>
</div>上記の内容を表示したものが以下となります。
内容が分かりやすいようにthには背景色、セルにはborderを設定してあります。
| 見出しサンプル | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト |
|---|---|---|---|
| 見出しサンプル | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト |
| 見出しサンプル | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト |
| 見出しサンプル | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト |
PC時などの画面サイズが大きい場合は大丈夫ですが、スマホの時や画面を小さくした際に、テーブルが潰れて見難くなっています。
CSSでtableを横スクロールさせる
続いて、このテーブルにCSSを設定し、横スクロールさせるようにしていきます。
HTMLはそのままで、以下のCSSを設定していきます。
.table_wrap {
overflow: auto;
/* overflow: scrol; や overflow-x: scroll; でも可能 */
}
.table_wrap table {
min-width: 600px;
}| 見出しサンプル | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト |
|---|---|---|---|
| 見出しサンプル | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト |
| 見出しサンプル | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト |
| 見出しサンプル | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト |
min-widthを設定する事で、テーブルがそのサイズより小さくなった時に親要素にスクロールバーが表示され、テーブルが横スクロールで表示されるようになります。今回はmin-widthを600pxに指定していますが、必要に応じて変更してください。
または、ブレイクポイントに応じてtableのサイズをmin-widthではなく、widthで指定してあげてもスクロールされます。
その他にwhitw-spaceを使用する方法もありますので簡単に紹介いたします。
white-spaceを使用する方法
CSSのwhite-spaceを使う事で自動改行を禁止にし、テーブル内のコンテンツがテーブルのサイズを超えた際に横スクロールされるようになります。
.table_wrap {
overflow: auto;
/* overflow: scrol; や overflow-x: scroll; でも可能 */
}
.table_wrap table {
white-space: nowrap;
}| 見出しサンプル | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト |
|---|---|---|---|
| 見出しサンプル | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト |
| 見出しサンプル | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト |
| 見出しサンプル | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト |
white-space: nowrap;での方法は、内容を自由に改行出来る決められた内容のコンテンツには有効ですが、Wordpress等で記事を入稿するといったユーザーが自由に改行等出来ない場合は、テーブルのサイズが大きくなり過ぎてしまう可能性もありますので注意してください。
さいごに
いかがでしたでしょうか。
このいずれかの方法でテーブルを横スクロールさせる事ができます。適切に横スクロールする設定にする事で見やすくなりますので、ぜひ使ってみてください。
