レスポンシブcssでtableを縦表示したり横スクロールする方法

レスポンシブ対応を行うとどうしても画面が崩れてしまう部分が出てきます。

僕が作ったサンプルページでもメニューやテーブル、サイドバーなどはまだまだ調整が必要です。

メニューはCSSだけでは対応出来ないので今回はテーブルをレスポンシブにしていこうと思います。

対応していない場合の表示

このようにテーブルの左側の列が開業されてしまい見にくい状態になってしまいました。

こういう状況はよくあることです。

これを改善するには主に2つの方法があります。

  1. 1列に縦長に表示する
  2. 改行しないよう横長にし横スクロールさせる

もちろんアイディア次第でこれら以外にも出来ることはあるかもしれませんが、上記の2つが出来ればだいたい対応出来ます。

1列に縦長に表示する

これは、今回のお問い合わせフォームのように、左列がヘッダーセルになっていて、あまり列が多くないテーブルに対して有効です。

これを使うと下の画像のように表示することが可能です。

ヘッダーセルと、フォームがあるセルが縦並びになり、変な改行がなくなります。

以下サンプルコードです。

テーブル部分のHTMLは上の通りです。

1行目のクラスに blocktable を追加しました。

 

CSSは次のものを追加しました。

ポイントとなるのは、th と td タグに対し、display: block; と width: auto!important; を設定したところです。

テーブルのセルの初期 display は、table-cell が値に設定されています。

これを block に変更することで、全てのセルがブロック要素になり改行されるということです。

 

ただ、PC表示時に th タグに対しては横幅を30%と設定していたためそれを削除する必要があります。

width プロパティに auto を設定すれば初期状態に戻り横幅いっぱいになります。

だけどPC表示時に設定した値が優先されてしまうため、width: auto!important; の赤字部分をつけました。

これにより優先的に値が設定されるようになります。

 

それ以外は表示幅の設定や、線の調整を行いました。

※パソコンの場合デベロッパーツールでスマホ表示してください。

改行しないよう横長にし横スクロールさせる

横スクロールの場合は、一番上の行にヘッダーセルがあり、横にずらーっと長いテーブルに有効です。

横にスクロールしないと全部見えないですが、表示がある程度しっかりしていればちゃんと見れます。

今回のテーブルは縦長のものだったのでちょっと分かりづらいですが、表示すると下の画像のようになり横にスクロールできるようになります。

HTMLコードは上で紹介したものと同じで、一行目のクラスだけ以下のように修正しました。

sidetable というクラスを設定し、それに対しスマホ表示時に横スクロールするCSSを適用しています。

CSSは以下の通りです。

overflow プロパティははみ出した部分の扱い方の設定が出来ます。

値に auto を設定することにより、横にはみ出した部分は横スクロールするようになります。

white-space: nowrap; は文字を改行せずに表示するための設定です。

セル内の文字が改行されてしまうことを防ぎます。

※パソコンの場合デベロッパーツールでスマホ表示してください。

まとめ

テーブルがスマホ対応すればかなりみやすくなりますね!

縦長のテーブルの場合は、セルをブロック要素にして1列表示する。

横長のテーブルの場合は、テーブルのラッパー要素に対し横にはみ出した場合はスクロールする設定を追加する。

これで大抵のテーブルのレスポンシブ対応は出来るはずです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA