1.8.2 Released!

SANGOで表を挿入する方法:レスポンシブ対応させるには?

表の挿入方法とレスポンシブ対応させる方法

スマホ、タブレット、パソコンと様々なサイズの端末でWebページが見られるようになった今、表を使うときには注意が必要です。

パソコンでは、うまく表示されていても「スマホで見ると、1つ1つのセルが狭くなりすぎてしまっている…」なんていうことがよくあるからです。

WordPressで表を使うには

WordPressで表を挿入する方法はいくつかあります。

ビジュアルエディタから

WordPressで表を挿入するときには、TinyMCE Advancedというプラグインを使うと簡単です。

このプラグインを使うと上の画像のように、HTMLの知識がなくても、好きな行✕列の表を直感的に挿入できます。挿入時につまづいたときには、下の記事を参考にすると良いでしょう。

参考 WordPress の投稿に表を挿入する方法バズ部

HTMLから

テキストエディタなどでHTMLで記事を書いている場合の表の作り方は、下の記事が参考になるはずです。

HTML/CSSでの表(table)の作り方
HTML/CSSでの表(table)の作り方

よく使う行・列の表のコードをプラグイン「AddQuickTag」などに登録しておいて、すぐに呼び出せるようにすると良いでしょう。


表をレスポンシブ対応させるには

表のレスポンシブ対応(スマホでもタブレットでもPCでも見やすいように最適化すること)を考えるために、いくつかの例を紹介します。

通常の表示を挿入した場合

まず、普通に表を挿入した場合です。パソコンだと以下のように見えるとします。

スマホの場合には以下のような表示になります。問題ないですね。

文章が長くなるとスマホ表示が崩れる

しかし、以下のような長文の含まれる表をスマホで見たらどうなるのでしょうか。

↓スマホの横幅では収まりきらないため、1行目と2行目が崩れてしまっているのが分かるかと思います。

SANGOで表をレスポンシブ対応させる方法

そんなとき(スマホだと表が崩れるとき)のためにSANGOでは表を簡単にレスポンシブ対応させる方法を用意しています。

ビジュアルエディタの場合

ビジュアルを使っている場合は次の手順でレスポンシブ対応させます。はじめに表の1ばん左上のセルにカーソルを置きます

次に「フォーマット」⇒「スタイル」⇒「表をレスポンシブに変える」を選びます。

これでレスポンシブ対応の設定は完了です。画面サイズが767px以下になると、表を右へとスクロールができるようになります。


HTMLの場合

HTMLの場合、以下のようにtableタグにtb-responsiveというクラスを追加します。

<table class=" tb-responsive">
   <tbody>
    ~略~
   </tbody>
</table>

これで一定以上サイズが小さくなると表はスクロールできるようになります。

48 COMMENTS

Mikoto 2019/06/22

いつも丁寧なマニュアルと可愛いテーマを使わせて頂きありがとうございます。
Gutenbergだと、Enterを押すとブロックが異なってしまうため、記事をShift+Enterで改行して、PCでは読みやすいように改行しています。(段落内改行のイメージ)
しかしスマホで見ると、変な箇所で改行されてしまい、読みにくくなってしまいます。
こちらはどこかの設定で修正することは可能でしょうか。
CSSも詳しくないので、もしコードを入力する必要があるのであれば詳しく教えて頂けると助かります。

回答を見る
motz 2019/01/09

サルワカさん、いつも素晴らしいテーマSANGOを愛用させていただいております。
表をレスポンシブにする機能がうまくいかず相談させて下さい。

ご指定通り左上のセルをクリックしてから“表をレスポンシブに”と設定しているのですが、通常レスポンシブだと画面幅を超える横幅分がスクロールできるようになると思うのですが、困ったことになぜか「横幅はみ出しで固定、縦スクロール」になってしまいます。一部正常に動作している表もあるのですが、サイトに挿入している表の大部分でこのような表示になってしまっており、何か解決策が有りましたらご教示いただけますでしょうか…

回答を見る
アイ 2019/01/09

TinyMCE Advancedのプラグインを追加すると、ビジュアルエディタから、「スタイル」が消えてしまうのですが、解決方法はありますでしょうか。

回答を見る
たいやき 2018/05/24

はじめまして。
わからない事があるので、質問させてください。

ウィジェットエリアに表を挿入したいのですが、
固定ページに表を入れた場合と表示のされ方が違ってしまいます。
固定ページの表と同じように表示されるようにするためには、
どうすればよろしいでしょうか?

回答を見る
るい 2018/05/04

こんにちは。SANGOを使わせていただいています。表を挿入しようと思いTinyMCE Advancedをインストールしたのですが、ビジュアルエディタでSANGOの項目が消えてしまいます。何か設定がありますでしょうか

回答を見る
goga 2018/03/16

すみません、間違って他人のコメントの返信に書き込んでしまいました。
改めて書き直すことをお許しください。

先日SANGOを購入し、デザインをカスタマイズしているのですが、表の装飾の記事やSANGOの見出しのコードを参考にテーブルの装飾をしてみたところ、上記の方と同じようにtdの中の線が変化しませんでした。
私もキャッシュを消してみたり、カスタムCSS、子テーマのStyleCSS、どちらも試してみたのですが上手くいきません。
こちらがコードなのですが、アドバイスをいただけますと幸いです。


table.table01 {
	width:100%;
	border-collapse: collapse;
                border: solid 3px #EE817B;
                text-align: center;
}
table.table01 th, table.table01 td {
  border: dashed 1px #EE817B;
}
table.table01 thead th {
	background: -webkit-repeating-linear-gradient(-45deg, #f4f4f4, #f4f4f4 3px,#eaeaea 3px, #eaeaea 7px);
                background: repeating-linear-gradient(-45deg, #f4f4f4, #f4f4f4 3px,#eaeaea 3px, #eaeaea 7px);
	color:#928484;
	padding:10px 15px;
}
table.table01 tbody th {
	background: -webkit-repeating-linear-gradient(-45deg, #f4f4f4, #f4f4f4 3px,#eaeaea 3px, #eaeaea 7px);
                background: repeating-linear-gradient(-45deg, #f4f4f4, #f4f4f4 3px,#eaeaea 3px, #eaeaea 7px);
	color:#928484;
	padding:10px 15px;
	vertical-align:middle;
}
table.table01 tbody td {
                background: -webkit-repeating-linear-gradient(-45deg, #fff9fb, #fff9fb 3px,#fff2f5 3px, #fff2f5 7px);
                background: repeating-linear-gradient(-45deg, #fff9fb, #fff9fb 3px,#fff2f5 3px, #fff2f5 7px);
	color:#EE817B;
                padding:10px 15px;
	vertical-align:middle;
                   border-bottom: dashed 1px #EE817B;
}
table.table01 tbody tr:last-child {
	border-bottom:#EE817B solid 3px;
}
回答を見る
にじます 2018/03/13

初めまして。質問のためコメントさせていただきます。
「表をレスポンシブにする」を選ぶ前に、表の1ばん左上のセルにカーソルを置くだけにしていますが、対応できません。他に解決方法はありますでしょうか?
よろしくお願いします。

回答を見る
ビリード 2018/02/24

質問させていただきます。別テーマからSANGOに切り替えました。
tableタグで『メニュー&料金表』を作成しようと考えています。
タグ別に線が出ないように設定してもtdの方だけ線を消すことが出来ませんでした。
全ての線を消すにはどのように設定すればよろしいでしょうか?

回答を見る
うちだ 2018/01/26

初めまして。お伺いしたいことがありコメントさせていただきます。
表をレスポンシブで表示する際、スクロールではなく、画面の幅に合わせて縮小して表示したいのですが、色々調べてみても上手く反映されません。
htmlでもCSSでも、反映される方法があれば教えていただきたいです。
よろしくお願いいたします。

回答を見る
かわいち 2017/12/19

こんにちは。sangoの素敵な機能を日々享受させていただいております。
ご相談なのですが、こちらの「表のレスポンシブ対応」について、サイト来訪者が一目見てスクロールできる表だとわかるように、スクロールバーを常に表示させておくようにしたいのですが、なにかやり方はあるものなのでしょうか?

回答を見る
チョビ 2017/11/08

こんにちは、チョビと申します。
sangoを購入し利用させていただいております。
本ページの「SANGOで表をレスポンシブ対応させる方法」を試しているのですが、記載通りの手順で対応してもうまくレスポンシブ対応にならないようなのですが、その他の手順が必要でしょうか。

ちなみに、私ほぼ素人ですので、SANGOのソースは基本的にカスタマイズしていないと思います。

回答を見る

コメントを残す

メールアドレスは公開されません。* は必須項目です。コメント投稿のガイドライン