【ブログ】テーブル（表）をスライド表示させる方法

2018年10月28日2022年4月30日ノウハウ

こんにちは、複業ブロガーのカズです。（@kazu20170825）

今回はこんな悩みを解決できる記事を書いていきます。

私はいつもテーブルの作成方法で悩みます。

PCのモニターサイズとスマホのディスプレイサイズは違うので、どちらに合わせてテーブルサイズを調整すると良いのか迷うからです。

いろいろと悩んだ結果、スライド表示がベストと言う結論になったので、まとめていきたいと思います。

同じようにテーブルサイズで悩んでいる方の参考になればうれしいです。

テーブルの要素と意味

例えば、上記のようなテーブルを作ってみると下記作成例のようになります。

テーブルのスライド表示方法

テーブルをスライド表示させるにあたって参考にしたのは、サルワカさんのこちらの記事になります。

【CSS】overflowの使い方：hiddenやscrollの違いは？

はみ出た部分の処理を決めるCSSのoverflowについて丁寧に解説します。分かりづらいvisible、hidden、sc ...

 https://saruwakakun.com/html-css/basic/overflow

今回、私が行いたいのはauto（スクロール）なのでtable要素に1行を追加します。

参考にさせて頂いたのは、helppostationさんのこちらの記事になります。

【簡単コピペ】Wordpressで表を崩さず横スクロールするHTML｜Helppo Station

何かを比較してまとめたい時に便利な表（Table）ですが、パソコンとスマホでは画面の大きさが違うので ...

 https://helppo-station.com/html-table-scroll

これで、テーブルがスライド表示できるようになりましたが、この時に注意するのがwidthです。

widthを100%に設定するとディスプレイに合わせて変換してしまうので、私のブログの場合はwidthを1280pxに設定しています。

このように設定することで、スマホだとスライド表示、PCだと画面一杯に表示になります。

まとめ

• 折り返す
• 隠す
• スクロール

今回はテーブル作成時の追加要素についてまとめました。但し、テーブル作成時に毎回スクロールさせる訳ではなく、ケースバイケースで設定するのが良いと思います。

個人的には3列以下はスクロール無し、4列以上はスクロール有りが見やすいかなと思います。

読書の方が見やすいブログ作成を心掛けていますので、宜しくお願いします。