【スマホサイズでも見やすい】tableを横スライドで見せる方法
Web Basic Archive
料金表やサービス比較表など横方向にボリュームが大きい表をtable要素で設置することがあるかと思いますが、スマホサイズで表示する場合、そのままでは、非常に見にくくなってしまいます。
今回は、table要素を横スライドで見せる方法など、スマホサイズでも見やすくするテクニックをご紹介していきます。
目次
tableを横スクロールで見せる方法
横に長い表は、PCサイズで見やすい表示でも、スマホサイズでは、横幅が狭い分どうしても見ずらくなったり、レイアウトが崩れてしまうので、レスポンシブで表示する場合は対応を検討する必要があります。まず基本的なtable要素の見え方について確認していきましょう。
table要素は内容によってセルの幅（列の幅）が決まる
table要素は、横幅の設定をしていない場合、セルの内容の大きさによって横幅が決まります。
また、テキストが長い場合は、親要素の幅を超えないようセルの幅が調整され、改行されて表示されます。
下のサンプルのように列が多い表だと、スマホサイズで見た場合(tableのwidthを390pxで設定)、セルのテキストが縦書きのような感じで表示されてしまいます。
See the Pen テーブル横スクロール by web-basic-archive (@web-basic-archive) on CodePen.
ですので、スマホサイズで表を表示する、
横スクロール以外の方法は？
- PC表示時から内容を選別しボリュームを減らす
- 縦長の表など見やすいデザインに変更する
などレスポンシブで表示を切り替えて対応する方法もありますが、PC表示と同じデザインで見せられる、テーブルを横にスクロールさせる方法が最も簡単な対応方法だと言えます。
横スクロールさせるCSSの設定
まずは、テーブルのＨＴＭＬ部分を確認します。
<div class="table-wrap">
<table>
<tr class="table-head">
<th>＆nbsp;</th>
<th>プランA</<th>
<th>プランB</<th>
<th>プランC</<th>
<th>プランD</<th>
<th>プランE</<th>
<th>プランF</<th>
<th>プランG</<th>
</tr>
<tr>
<th>項目１</th>
<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>
</tr>
<tr>
<th>項目３</th>
<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>
</tr>
</table>
</div>次にCSSの設定です。
.table-wrap {
overflow-x: scroll;
}
table {
width: 100%;
border-collapse: collapse;
white-space: nowrap;
}
table th,
table td {
border: 2px solid #ccc;
padding: 15px 10px;
}
.table-head {
background: #eee;
}まず親要素に、overflow-x: scroll; を設定して、親要素の幅から、はみ出た分をスクロールできるようにしておきます。
テーブル要素の横幅は、親要素の幅100％になるように、width: 100%にします。
そして、テーブルを親要素からはみ出す設定、テキストを改行させないように、white-space: nowrap; させるのがポイントです。
CSSのポイント
- 親要素に、overflow-x: scroll;
- テキストを改行させない、white-space: nowrap;
コードサンプルは以下のようになります。
コードサンプル
See the Pen テーブル横スクロール２ by web-basic-archive (@web-basic-archive) on CodePen.
項目を固定して見やすくする
横に長いテーブル表では、サンプルのようにスクロールしていくと、左端の項目が隠れてしまうので、何の情報だったかが分かりづらい状態となってしまいます。
そこで、項目を固定して表示する方法を追加していきましょう。
<div class="table-wrap">
<table>
<tr class="table-head">
<th class="fixed">＆nbsp;</th>
<th>プランA</<th>
<th>プランB</<th>
<th>プランC</<th>
<th>プランD</<th>
<th>プランE</<th>
<th>プランF</<th>
<th>プランG</<th>
</tr>
<tr>
<th class="fixed">項目１</th>
<td>内容テキストが入ります</<td>
<td>内容テキストが入ります</<td>
<td>内容テキストが入ります</<td>
<td>内容テキストが入ります</<td>
<td>内容テキストが入ります</<td>
<td>内容テキストが入ります</<td>
<td>内容テキストが入ります</<td>
</tr>
<tr>
<th class="fixed">項目２</th>
<td>内容テキストが入ります</<td>
<td>内容テキストが入ります</<td>
<td>内容テキストが入ります</<td>
<td>内容テキストが入ります</<td>
<td>内容テキストが入ります</<td>
<td>内容テキストが入ります</<td>
<td>内容テキストが入ります</<td>
</tr>
<tr>
<th class="fixed">項目３</th>
<td>内容テキストが入ります</<td>
<td>内容テキストが入ります</<td>
<td>内容テキストが入ります</<td>
<td>内容テキストが入ります</<td>
<td>内容テキストが入ります</<td>
<td>内容テキストが入ります</<td>
<td>内容テキストが入ります</<td>
</tr>
<tr>
<th class="fixed">項目４</th>
<td>内容テキストが入ります</<td>
<td>内容テキストが入ります</<td>
<td>内容テキストが入ります</<td>
<td>内容テキストが入ります</<td>
<td>内容テキストが入ります</<td>
<td>内容テキストが入ります</<td>
<td>内容テキストが入ります</<td>
</tr>
</table>
</div>ＨＴＭＬ部分です。固定させたい、左端の列に当たる部分に、classを設定しておきます。
.table-wrap {
overflow-x: scroll;
}
table {
width: 100%;
border-collapse: collapse;
white-space: nowrap;
}
table th,
table td {
border: 2px solid #ccc;
padding: 15px 10px;
}
.table-head {
background: #eee;
}
.fixed {
position: sticky;
left: 0;
background: #fff;
border-left: 1px solid #ccc;
}
.fixed::before {
content: "";
position: absolute;
top: 0;
left: -1px;
width: 100%;
height: 100%;
border-left: 2px solid #ccc;
border-right: 2px solid #ccc;
background: #fff;
z-index: -1;
}
.table-head .fixed {
background: #eee;
}
.table-head .fixed::before {
background: #eee;
}固定させたい部分のクラスに、position: sticky; を指定します。
固定の設定はこれだけでOKなのですが、固定させると元々のテーブルに設定しているborderやbackgroundなどのスタイルが、スクロール時に下に残ってしまうような表示になってしまいますので、それを補うため、before疑似要素を追加して調整しています。
細かな微調整などは、表示するテーブルのデザインに合わせてください。
CSSのポイント
- 固定させたい左端の列の部分にクラスを設定しておく
- position: sticky; で固定させる
- before疑似要素でスタイルの調整をする
コードサンプル
See the Pen テーブル横スクロール3 by web-basic-archive (@web-basic-archive) on CodePen.
スクロールをわかりやすくする「ScrollHint」
ここまで、横に長いテーブル表をスクロールできるように設定してきましたが、ユーザーが横にスクロールできることに、気づかない場合もあります。
そういう場合に、スクロールできることをアイコンでわかりやすく伝えてくれる、JavaScriptライブラリ「ScrollHint」があります。
ScrollHintの導入方法
<head>タグでCDNを読み込ませます。
<link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css">
<script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script>ヒントを表示させたいテーブルの親要素にクラスを付与しておきます。
（クラス名は次のjsファイルで指定すれば任意のもので大丈夫みたいです。）
<div class="table-wrap">
<table>
<tr>
<td>テキスト</td>
<td>テキスト</<td>
<td>テキスト</<td>
<td>テキスト</<td>
<td>テキスト</<td>
<td>テキスト</<td>
<td>テキスト</<td>
<td>テキスト</<td>
</tr>
～省略～
</table>JavaScriptのファイルで下記のように記述します。
scrollableの部分で、ヒントに表示するテキストを編集できます。
new ScrollHint('.table-wrap', {
i18n: {
scrollable: '横にスクロールできます'
}
});このように簡単に導入できますが、さらにオプションなどでカスタマイズが可能なので、詳しくは、ScrollHintのサイトでご確認ください。
コードサンプル
See the Pen テーブル横スクロール４ by web-basic-archive (@web-basic-archive) on CodePen.
ヒントを出すことで、スクロールできることがわかりやすくなり、ユーザーが見逃すことが少なくなるのではないでしょうか。
このように、テーブルを横にスクロールさせるだけで終わらずに、項目固定やヒントを出すなど、スマホサイズでもユーザーが見やすい工夫を合わせて行うとより良くなると思いますので、是非お試しください。
