【WordPress】スマホで表(テーブル)が見切れる場合はスクロールとレスポンシブで対応しよう

こんにちは。仁科(@nishina555)です。

みなさんはブログで『表(テーブル)』を利用することはありますか？

表はわかりやすい記事を書くためにはなくてはならないものですし、実際自分も比較記事やスペック紹介記事などを書く時によく表を利用しています。

そんな便利な表ですが、パソコンで表示を確認していざブログを公開!でもスマホで見てみたら表が見切れてた！という経験はありませんか?

例えば、過去の記事で以下のような表を作成しました。

PCでみたときの表

プレビューもしっかり確認し、OKと思ったのですが、スマホで確認すると以下のように表が見切れていました。

スマホでみたときの表

今回は上記のようにスマホや幅の狭いブラウザで表が見切れてしまって困っているという人向けのCSSカスタマイズに関する記事です。

表がスマホで見切れないようにする対策方法として今回はレスポンシブ対応とスクロール機能の2つを紹介します。

対策1: 表(テーブル)をレスポンシブ対応させる

表をレスポンシブ対応させることで表が見切れなくなります。

レスポンシブ対応は一番スタンダードな方法です。
表の幅を割合(パーセント)で指定することで見ている画面の幅に合わせて表の幅も変更されるようになります。

表をレスポンシブ対応させるには、表のプロパティの一般タブにある幅の項目を空白もしくは『100%』などのパーセント表示にします。

逆に、幅がピクセルで指定されていると狭い画面で見たときに表が見切れる原因となるため気をつけてください。

レスポンシブ対応がされると以下のようにPCとスマホで表の幅が自動で調整されるようになります。
なお、表はこちらの記事で書かれたものを掲載しています。

PCで見た時の表

スマホでみたときの表

対策2: 表(テーブル)にスクロール機能を追加する

スマホで表が切れる問題はレスポンシブ対応をすることで解決できます。

しかしレスポンシブ対応では以下のような問題があります。

例えば、先ほど例に出したレスポンシブ対応の表も画面の幅が狭くなりすぎるとわかりにくくなります。

スマホでみたときの表

そんなときはスクロール機能のついた表が役に立ちます。

スクロール機能をつけるためには以下のようなcssを追加します。

style.css

.scrollable-table table{
  border-collapse: collapse;
  margin: 2em 0;
  max-width: 100%;
}

.scrollable-table th{
  background-color: #eee;
}

.scrollable-table th,
.scrollable-table td{
  border: solid 1px #ccc;
  padding: 3px 5px;
  white-space: nowrap;
}

.scrollable-table {
  overflow-x: auto;
  margin-bottom: 1em;
  max-width: 770px;
}

CSSの意味をざっくり説明すると、white-space: nowrapで文字の折り返しをさせないようにし、scrollable-tableクラスのmax-widthで表を表示する幅を決めています。
overflow-x: auto;で横にはみ出した表の部分をスクロール表示(表示方法は正確にはユーザーエージェント依存)させるようにしています。

使い方ですが、作成した表のtableタグを<div class="scrollable-table">のdivタグで囲むことで、表にスクロール機能がつくようになります。

実際にスクロール機能のついた表のソースコードは以下のようになります。

<div class="scrollable-table">
  <table style="border-collapse: collapse; width: 100%;" border="1">
    <tbody>
      <tr style="height: 22px;">
　　　　　　　　　　　　・・・・・・
      (中略)
　　　　　　　　　　　　・・・・・・
      </tr>
    </tbody>
  </table>
</div>

実際に表示される表は以下のようになります。

これで任意の表にスクロール機能をつけることができるようになります。

もし、いちいちクラスを与えるのが面倒くさい、全ての表でスクロール機能をつけたいという場合は以下のコードをfunction.phpに追加します。参考『WordPressで横長の表を崩さずに挿入する方法（レスポンシブ対応表）』

function.php

add_filter('the_content', function ($the_content) {
  $the_content = preg_replace('/<table/i', '<div class="scrollable-table"><table', $the_content);
  $the_content = preg_replace('/<\/table>/i', '</table></div>', $the_content);
  return $the_content;
});

対策3: レスポンシブ対応とスクロール機能を組み合わせた表(テーブル)を作る

最後にレスポンシブ対応とスクロール機能を組み合わせた対策方法を紹介します。

一方、ある程度ブラウザの幅がある場合は、表の全体像がすぐに見れるレスポンシブ対応のほうがスクロールよりもユーザビリティが高そうです。

そこで、ウィンドウの幅に応じてレスポンシブにするかスクロールさせるかを組み合わせてみます。
カスタマイズCSSは以下のようになります。

style.css

@media (max-width: 480px) {
  .sp-scrollable-table table{
    border-collapse: collapse;
    margin: 2em 0;
    max-width: 100%;
  }

  .sp-scrollable-table th{
    background-color: #eee;
  }

  .sp-scrollable-table th,
  .sp-scrollable-table td{
    border: solid 1px #ccc;
    padding: 3px 5px;
    white-space: nowrap;
  }

  .sp-scrollable-table {
    overflow-x: auto;
    margin-bottom: 1em;
    max-width: 770px;
  }
}

スクロール機能をつけるためのcssと違う点は@media (max-width: 480px)で囲まれているという点です。
これはメディアクエリと呼ばれるものなのですが、ここでは480ピクセルよりも幅が狭い場合にクラスを適用するという意味になります。

使い方は先ほどスクロール機能をつけた時と同じく表をクラスで囲めばOKです。
今回の場合ですと、<div class="sp-scrollable-table">のdivタグで表を囲むことで、スクロール機能とレスポンシブ対応を組み合わせた表ができます。

実際の表は以下のようになります。
スマホの場合はスクロール機能がついています。一方パソコンの場合はブラウザの幅を狭くするとレスポンシブ対応からスクロール機能に変化するのがわかると思います。

まとめ

今回はスマホで表が見切れないようにする方法としてレスポンシブ対応とスクロール機能のカスタマイズ方法について説明をしました。

ブログを書いているとパソコンのプレビューだけ見て満足してスマホでの見た目の確認を忘れがちです。

しかし、モバイルファーストという言葉があるように、スマホでの見た目は非常に重要になってくるため、きちんと対策をするようにしましょう。おつかれさまでした！

この記事がいいなと思いましたらツイッター(@nishina555)のフォローもよろしくお願いします！