WordPressで横長の表を崩さずに挿入する方法（レスポンシブ対応表）

PR 2016/8/11 WordPressカスタマイズ 9

WordPressで見やすく表を挿入したい時があります。

けれども、横幅が大きすぎて、以下のように表示が崩れてしまい、逆に読みにくくなってしまったなんて事がある方も多いかと思います。

横幅の長い表で表示が崩れる

通常、横幅の長い表をWordpress本文で表示しようとしたら、メインカラムからはみ出してしまうし、変なところで改行されて、文字は読みにくいしで、「分かりやすくするつもりで表を挿入したのに、逆に分かりづらくなってしまう」なんて事になってしまいます。

これがスマホだと、なおさらひどい状況になると思います。

けれども、今回のカスタマイズを行うことで、横幅が大きすぎる表は、横スクロールバーが表示されて、表が崩れないようになると思います。

こんな感じで。※横幅がはみ出している部分は横スクロールしてください。

毎日の全国データ一覧表（日別値:2016年10月09日）
地点 気圧 気温 湿度 風向・風速 日照
時間		 降水量 降雪の
深さ
合計		 最深
積雪		 天気概況
現地 海面 平均 最高 最低 平均 最小 平均 最大 最大瞬間 日合計 日最大 0600-1800 1800-翌0600
平均 平均 風速 風速 風向 風速 風向 １時間 10分間
東京 1004.5 1007.3 22.3 25.7 18.6 74 45 3.9 8.2 南南西 14.8 南 0.0 32.5 18.0 5.5 — —
千葉 1006.8 1007.5 23.1 26.6 19.1 84 65 5.9 15.0 南南西 24.1 南西 0.0 24.5 15.5 4.0 — —
横浜 1002.4 1007.3 22.8 25.7 19.4 74 45 5.3 9.3 南西 16.3 南西 0.0 6.5 3.5 1.5 — —
長野 962.3 1010.8 15.9 20.5 11.9 84 57 3.5 7.5 北東 12.8 東北東 1.2 13.5 7.0 1.5 — —

引用 気象庁データ

というわけで今回は、スマホなどでも表が崩れず、横揺れが出ないようにするためのWordpressのカスタマイズ方法を紹介したいと思います。

スポンサーリンク
レクタングル（大）広告

主な手順

今回、「横幅の広い表を挿入してもWordpressで表示が崩れない横スクロール表」にするための主な手順は以下です。

  1. functions.phpにコードを追加
  2. style.cssにスタイルを追加

基本的に、上記のコピペ2手順で行うことができるカスタマイズなので、結構簡単に実装できるかと思います。

今回この方法は、以下の記事を参考にWordpress用にアレンジさせていただきました。

参考 横長の表をスマホでうまく表示する方法 | 西沢直木のIT講座

functions.phpにコードを追加

まずは、functions.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;
});

これは、本文呼び出しをフックして、本文中にtableタグが含まれていれば、<div class=”scrollable-table”></div>で囲む処理をしています。

無名関数を利用しているので、PHP5.4以上でないとエラーが出ます。

style.cssにスタイルを追加

あとは、style.cssに以下のスタイルを追加します。

.scrollable-table table{
  border-collapse: collapse;
  margin: 1em 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;
}

ここでポイントとなってくるのは以下のスタイルのみです。

.scrollable-table th,
.scrollable-table td{
  white-space: nowrap;
}

white-spaceプロパティは、ソース中の半角スペース・タブ・改行の表示の仕方を指定する際に使用します。

nowrapが指定されていると、ソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示します。ボックスの大きさが指定されている場合にも、自動的に改行されることがありません。

参考 white-space－スタイルシートリファレンス

この、「white-space: nowrap;」が入っていないと、表のセル内の文字列が自動的に改行されてしまうので、うまく動作しません。

その他のスタイルについては、それぞれのサイトのデザインによって好みのものに変更してください。

動作確認

上記のカスタマイズを行うことで、以下のような横長の表も、カラムからはみ出すこともなく、スマホでも綺麗に表示することができます（横スクロールする必要はありますが）。

※横幅がはみ出している部分は横スクロールしてください。

出自 信仰 一門 登場 相性 姓名 統率 武勇 知略 政治 総合 戦法 足軽 騎馬 弓隊 鉄砲 兵器 誕生 死亡 格付 義理 読み
武士 仏教 54 1582 60 真田幸村 98 108 89 36 331 影突 A S D C C 1567 1615 S 99 さなだゆきむら
武士 仏教 54 1581 58 真田信幸 80 62 75 88 305 鼓舞 D C B A C 1566 1658 A 80 さなだのぶゆき
武士 仏教 54 1562 60 真田昌幸 97 76 98 91 362 火牛 S A B C B 1547 1611 S 48 さなだまさゆき
武士 仏教 54 1615 60 真田幸昌 64 71 29 16 180 突撃之一 C C D D D 1600 1615 C 95 さなだゆきまさ
武士 仏教 53 1561 70 武田勝頼 89 90 56 55 290 騎馬強化 D A C D A 1546 1582 A 53 たけだかつより
武士 仏教 53 1536 63 武田信玄 110 82 96 94 382 不動之備 B S A D C 1521 1573 S 10 たけだしんげん
武士 仏教 384 1552 71 小山田信茂 72 78 58 39 247 斉射之二 B D A D C 1539 1582 B 24 おやまだのぶしげ
武士 仏教 40 1577 86 北条氏直 57 42 35 56 190 鎮静 D D D C D 1562 1591 C 75 ほうじょううじなお
武士 仏教 40 1553 77 北条氏政 82 63 78 89 312 槍衾之二 B C C D D 1538 1590 A 35 ほうじょううじまさ
武士 仏教 60 1570 10 上杉景勝 90 87 71 84 332 車懸之備 B A C B B 1555 1623 A 98 うえすぎかげかつ
武士 仏教 44 1572 0 織田信忠 78 72 59 70 279 鉄砲強化 B C D A D 1557 1582 A 84 おだのぶただ
武士 なし 44 1546 0 織田信長 100 89 94 97 380 覇王之備 A C A S B 1534 1582 S 40 おだのぶなが
忍者 仏教 319 1540 0 滝川一益 89 81 84 54 308 連撃之四 C D D S B 1525 1586 A 67 たきがわかずます
武士 仏教 49 1543 56 明智光秀 88 85 92 96 361 烈火 B C D S A 1528 1582 A 42 あけちみつひで
庶民 仏教 46 1583 9 羽柴秀次 34 45 16 56 151 罵声 D C D C D 1568 1595 C 33 はしばひでつぐ
庶民 仏教 46 1555 10 羽柴秀長 74 67 83 93 317 籠絡 A D A B D 1540 1591 A 87 はしばひでなが
庶民 仏教 46 1552 10 羽柴秀吉 87 73 93 104 357 威風之備 S D D B A 1537 1598 S 45 はしばひでよし
庶民 仏教 46 1608 10 羽柴秀頼 56 30 36 57 179 鼓舞 D D C C D 1593 1615 C 69 はしばひでより
武士 仏教 94 1581 10 宇喜多秀家 69 58 41 56 224 威圧 C D D C C 1572 1655 B 79 うきたひでいえ
武士 仏教 46 1597 7 木下（小早川）秀秋 38 23 23 16 100 威圧 D C D D D 1582 1602 C 10 きのしたひであき
武士 仏教 482 1574 15 大谷吉継 93 68 91 89 341 槍衾之極 A C B B B 1559 1600 A 99 おおたによしつぐ
庶民 仏教 129 1575 20 石田三成 52 13 85 99 249 鼓舞 B D D C C 1560 1600 A 98 いしだみつなり
庶民 仏教 338 1577 99 加藤清正 88 92 64 71 315 槍衾之三 S B D B A 1562 1611 A 80 かとうきよまさ
武士 仏教 478 1571 5 片桐且元 55 70 39 60 224 連撃之一 C D D C D 1556 1615 C 70 かたぎりかつもと
武士 仏教 580 1575 12 後藤基次（又兵衛） 85 88 57 16 246 槍衾之三 A D D B B 1560 1615 A 92 ごとうもとつぐ
武士 仏教 359 1592 9 毛利勝永 89 82 76 42 289 連撃之二 B A D B D 1577 1615 B 73 もうりかつなが
武士 仏教 42 1555 90 徳川家康 96 87 94 100 377 鉄壁之備 S C D B A 1542 1616 S 85 とくがわいえやす
武士 仏教 42 1594 78 徳川秀忠 21 18 73 84 196 威圧 D D D D A 1579 1632 A 29 とくがわひでただ
武士 仏教 290 1563 90 本多忠勝 91 98 71 60 320 神槍 S A D C B 1548 1610 A 94 ほんだただかつ
武士 一向宗 292 1557 90 本多正信 20 6 101 95 222 同討 D D D D S 1538 1616 A 53 ほんだまさのぶ

参考 「信長の野望 天道」より、「真田丸」に出てきた主な武将データを抽出

もちろん、横幅の短い表はスクロール表示はありません。

姓名 統率 武勇 知略 政治 総合
真田幸村 98 108 89 36 331
真田信幸 80 62 75 88 305
真田昌幸 97 76 98 91 362
真田幸昌 64 71 29 16 180
武田勝頼 89 90 56 55 290
武田信玄 110 82 96 94 382
小山田信茂 72 78 58 39 247
北条氏直 57 42 35 56 190
北条氏政 82 63 78 89 312
上杉景勝 90 87 71 84 332
織田信忠 78 72 59 70 279
織田信長 100 89 94 97 380
滝川一益 89 81 84 54 308
明智光秀 88 85 92 96 361
羽柴秀次 34 45 16 56 151
羽柴秀長 74 67 83 93 317
羽柴秀吉 87 73 93 104 357
羽柴秀頼 56 30 36 57 179
宇喜多秀家 69 58 41 56 224
木下（小早川）秀秋 38 23 23 16 100
大谷吉継 93 68 91 89 341
石田三成 52 13 85 99 249
加藤清正 88 92 64 71 315
片桐且元 55 70 39 60 224
後藤基次（又兵衛） 85 88 57 16 246
毛利勝永 89 82 76 42 289
徳川家康 96 87 94 100 377
徳川秀忠 21 18 73 84 196
本多忠勝 91 98 71 60 320
本多正信 20 6 101 95 222

上記のテーブルは、スマホで見ると、ちょうど横スクロールバーが表示される大きさではないかと思います。

まとめ

今回のカスタマイズを行うことで、以下のような問題点は解決できると思います。

  • 狭いカラム幅に横長の表を入れたときに表示が崩れたりはみ出す問題
  • スマホでの表の崩れやはみ出し問題
  • 表の幅が広いための横揺れ問題
  • 幅の狭い端末で表が見づらい問題

ただ、今回のカスタマイズを行うことで、以下の不都合が出るかもしれません。

  • 表の一部が隠れるのでデータを見るにはユーザーが横スクロールする必要がある
  • ユーザーが閲覧時に、横スクロールがあるのかが分かり辛い

上記の利点・難点を加味した結果、個人的には、「横スクロールが出るよりも、表示が崩れるのがキツイ」と思うので、カスタマイズするメリットの方が大きいとは思っています。

というわけで「大きな表の表示が崩れる」とか「スマホで表が見づらい」なんてことがある場合は、今回のカスタマイズは1つの選択肢としてありだと思います。

スポンサーリンク
レクタングル（大）広告
レクタングル（大）広告

シェアする

フォローする

スポンサーリンク

わいひら

『WordPressで横長の表を崩さずに挿入する方法（レスポンシブ対応表）』へのコメント

  1. 名前:ヒロタマサト 投稿日：2017/06/12(月) 12:17:27 ID：b83c7f666

    wpもHP制作も独学の超初心者です。
    とても参考になりました。ありがとうございます。
    やりたい事が一発でできました！

    でも一つ問題が発生しました。ブログ内の全てのテーブルに適用されるので、他のテーブルデザインが総崩れしてしまいました。

    特定のテーブルだけに適用する書き方はございませんか？

    ご教示頂けましたら嬉しい限りです。素人質問で申し訳ございません。

    宜しくお願いします。

  2. アバター画像 名前:わいひら 投稿日：2017/06/13(火) 16:06:10 ID：c6718cf84

    特定のテーブルのみに適用する場合は、クラス名のついたテーブルのみに処理が適用されるようにコードを修正すればいけるかと思います。

    例えばPHPのコードは以下のようにして

    //横スクロールレスポンシブテーブル用の要素の追加
add_filter('the_content', function ($the_content) {
  $the_content = preg_replace('/
    /i', '
    ', $the_content);
  return $the_content;
});

    この記事で紹介したテーブルで表示したいときだけ以下のようにテーブルを書くとか。

    
（以下略）
  3. 名前:ヒロタ 投稿日：2017/06/13(火) 17:56:40 ID：e0ca548c7

    早速のご教示誠にありがとうございます。
    tableはクラス指定ではなくidにしています。テーマはBizVektorを使用していますが、class指定だとcssが効かなかったためidにしました。

    ご教示頂いたclassをidにして試してみましたところ、ウィジェットやその他のパーツのデザインが総崩れになったので元に戻しました。

    私には全くと言っていいほど知識がなく（勉強中）、せっかくご教示頂いたことも生かすことができませんでした。

    add_filter('the_content', function ($the_content) {
  $the_content = preg_replace('/<table id="stable"/i', '<table id="stable"', $the_content);
  $the_content = preg_replace('//i', '', $the_content);
  return $the_content;
});

    idだとだめなのでしょうか？

  4. アバター画像 名前:わいひら 投稿日：2017/06/13(火) 19:52:39 ID：c6718cf84

    IDは基本的にHTML仕様上、HTML中に1つの要素使うものとされています。
    なので、本文中に1つしかテーブルを使用しないのであればOKではないでしょうか。2つ以上使用していたとしても、意図通りに表示されているのであれば、「HTMLの作法的に良くないとい」うだけで特にそこまで問題ないかと思います。
    クラスで指定する場合は、優先度の高いCSSセレクターを書く必要があるかもしれません。詳しくは「CSS セレクタ 優先度」等で検索してみてください。
    クラスで指定できない原因（と対策方法）を見るためには、実際のページのURLを見せていただく必要があるかもしれません（BizVektorがどういったCSS設定になっているのかデベロッパーツールで見る必要があるため）。
    なので、特に問題ない場合は、そのままでも良いかと思います。

  5. 名前:ヒロタ 投稿日：2017/06/13(火) 21:53:25 ID：e0ca548c7

    ありがとうございます。

    とてもご丁寧なご対応に感謝感激です！

    もう少し勉強して頑張ってみます。

    ありがとうございました。

  6. 名前:丸二 投稿日：2017/12/03(日) 22:38:51 ID：099620a45

    たびたび申し訳ありません。再送させていただきます。(上の２つは削除ください。）

    初心者です。エクセルで作成した横長の一覧表の組み込みに悩んでこちらに辿り着きました。
    エクセルからCSV経由でhtmlに変換し、貼り付けしてからTynyMCEで編集しています。
    このページで紹介いただいた方法で表の横スクロール自体は無事できるようになったのですが、１つのセルの中に長文が入っていると改行されずに横長の一覧表ができてしまいます。
    例えば、表の1行目を表題として、

    <th style="width: 150px;">タイトル</th>

    としても、150pxで改行されず１列に長文が並んでしまいます。
    そこで、style.cssの「white-space: nowrap;」をコメントアウトしたのですが、残念ながら効果ありませんでした。
    何かうまい方法はないものでしょうか？

  7. 名前:丸二 投稿日：2017/12/03(日) 22:44:03 ID：099620a45

    本当に申し訳ありません。
    どうしてもうまく貼り付けできないので、全角で書かせていただきます。

    ＜ｔｈ style=”width: 150px;”>Echo＜／ｔｈ＞

  8. アバター画像 名前:わいひら 投稿日：2017/12/04(月) 19:11:52 ID：bcdad6c66

    書き込み内容だけでは、わからない部分も多いので、ソースコードを見るために、できれば実際のページのURLを貼り付けていただいて良いでしょうか？

  9. 名前:丸二 投稿日：2017/12/10(日) 22:40:01 ID：ea07e3aa0

    遅くなり申し訳ありません。
    もう１度、自分で考えてみます。
    どうもありがとうございました。