”シンプル”なデザインを、”フツー”のWEBサイトを

表を組んだりするときにつかう<table>タグ。PCで見るときは問題無くても、以外と悩ましいのがタブレットやスマホで表示したときです。

例えば、見出しとデータが1つずつだけのシンプルな表であれば、CSSのメディアクエリとdisplayをつかって段組を変えたりすれば良いだけですが、少し情報が細分化された表の場合に同じ方法で表示してしまうと、見出しの下にデータがずらずらと箇条書きで表示されたような状態になってしまって、これはこれで少し分かり辛かったりします。かと言って、段組を変えないとそれはそれでセルの幅が縮まって見辛くなる・・・

そんなときはtableに横スクロールを付けてみるのも一つの手段です。

見にくいtableの例

例として見にくいいtableの例を作ってみました。ウィンドウ幅を縮めたりして見てみてください。

DEMO

もちろん1つ目のtableは論外です。

2つ目のtableは例だとそれほど見にくくなっていない気もしますが、もっと<td>が増えたりした場合、少し気になってしまうと思います。

さらに下の記事にあるような表だと、スマホではどのように見せるのが良いのか、もはやわけが分からなくなってきてしまいます。

Bootstrap4でデバイス別に表示・非表示を切り替えるclass
先日来Bootstrap4をちょくちょくいじっているのですが、今回のバージョンから、ウィンドウ幅に応じて要素を表示させたり非表示にさせたりするclass名が変わっているよう...

tableに横スクロールを実装するCSS

で、本題です。

上で紹介したBootstrapのclassの表は、タブレットやスマホで見た場合tableが横スクロール出来るようになっています。

HTMLはこんな感じです。

<div class="scroll">
<table class="table table-striped">
<tr>
<th></th>
<th>スマホ<br>(幅767px以下)</th>
<th>タブレット<br>(幅768px~991px)</th>
<th>デスクトップ<br>(幅992px~1199px)</th>
<th>デスクトップ<br>(幅1200px以上)</th>
</tr>
<tr>
<td>.visible-xs</td>
<td class="vis">表示</td>
<td>非表示</td>
<td>非表示</td>
<td>非表示</td>
</tr>
<tr>
<td>.visible-sm</td>
<td>非表示</td>
<td class="vis">表示</td>
<td>非表示</td>
<td>非表示</td>
</tr>
<tr>
<td>.visible-md</td>
<td>非表示</td>
<td>非表示</td>
<td class="vis">表示</td>
<td>非表示</td>
</tr>
<tr>
<td>.visible-lg</td>
<td>非表示</td>
<td>非表示</td>
<td>非表示</td>
<td class="vis">表示</td>
</tr>
<tr>
<td>.hidden-xs</td>
<td>非表示</td>
<td class="vis">表示</td>
<td class="vis">表示</td>
<td class="vis">表示</td>
</tr>
<tr>
<td>.hidden-sm</td>
<td class="vis">表示</td>
<td>非表示</td>
<td class="vis">表示</td>
<td class="vis">表示</td>
</tr>
<tr>
<td>.hidden-md</td>
<td class="vis">表示</td>
<td class="vis">表示</td>
<td>非表示</td>
<td class="vis">表示</td>
</tr>
<tr>
<td>.hidden-lg</td>
<td class="vis">表示</td>
<td class="vis">表示</td>
<td class="vis">表示</td>
<td>非表示</td>
</tr>
</table>
</div>

ポイントは<table>を<div class="scroll">という<div>で囲っている点です。この部分のCSSは下記の通りです。<table>部分のCSSは好きなように書いちゃってください。

.scroll{
overflow: auto;
white-space: nowrap;
}
.scroll::-webkit-scrollbar{
 height: 5px;
}
.scroll::-webkit-scrollbar-track{
 background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {
 background: #BCBCBC;
}

::-webkit-scrollbarはスクロールバー全体の高さ、::-webkit-scrollbar-trackはスクロールバーの背景色を指定しています。また、::-webkit-scrollbar-thumbは、スクロールバーの中の動く部分の色を指定しています。

DEMO

そもそも何のために情報を表組みにするのか?見ている人がわかりにくかったら何の意味もありません。こう考えると、このような表示方法も選択肢の一つとして考えても良いのではないでしょうか?