Ver1.5 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>

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

41 Comments

チョビ

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

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

返信する
サルワカくん

「表をレスポンシブにする」を選ぶ前に、表の1ばん左上のセルにカーソルを置くだけにしていますか?
表が選択されていると、どうやら効かないようです。

返信する
かわいち

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

返信する
サルワカくん

できるか分かりませんが
table.tb-responsive::-webkit-scrollbar {
height: 5px;
}
table.tb-responsive::-webkit-scrollbar-track {
border-radius: 5px;
background: #F3F3F3;
}
table.tb-responsive::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #CCCCCC;
}

と子テーマのCSSに追記して頂けますか?ご確認よろしくおねがいします。

返信する
かわいち

ご確認ありがとうございます!
CSSに追記してみたのですが、iPhone上(Safari、Chrome等)では変化がありませんでした。。

ただ、PCのブラウザ(Chrome)のデベロッパーツール状態でブラウザ幅を狭めて表示させてみたところ、確かにスクロールバーが常に表示されるようになりました。

iPhoneはなにかクセがあるのですかね。。

返信する
サルワカくん

これで反映されないとなると…私の方では分からないですね。。。
お役に立てず、申し訳ないです。

返信する
かわいち

承知しました…。
なにか、他の方法を考えてみます。
お忙しいところご返信いただき、ありがとうございました。

うちだ

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

返信する
サルワカくん

表を作るときにレスポンシブにしなければ(とくに設定をしなければ)、画面幅に応じて可変で表示されるようになります。
小さい画面で見ても、はみ出ないようにこのような仕様にしております。

返信する
うちだ

お返事いただきありがとうございます。
表の幅は画面サイズに応じて縮まるのですが、中の文字が大きいままなので、改行が多くなり見づらくなってしまいます。
画像を縮小するように、中の文字、画像も縮小されればと思うのですが可能でしょうか?

返信する
サルワカくん

なるほど。
そうなると難しいですね…。
「どのセルをどのくらいの比率にするべきか」ということを理解して良い感じに表示する、ということが現在のCSSではできないのですよね。
たくさんの文字を入れるorたくさんのセルを作るのであれば、スクロールできるようにする…、というのが現在だとベストだと思います。

返信する
ヨーダ

コメント失礼致します。
PCで見る分には問題ないのですが、スマホで表を見ると少し右側にはみ出てしまっている箇所があり、修正できればと考えています。表のプロパティで幅は100%に設定しています。
解決策があればご教示くだい。

返信する
サルワカくん

確認したところ、表の中のURLが原因のようです。
(URLが折り返されないような設定になっていました)
そのため、URLをリンクテキストに変える、もしくは以下のCSSを追加することで修正することができるかと思います。

.entry-content td {
    word-break: normal;
}

恐れ入りますがご確認よろしくお願い致します。

返信する
ビリード

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

返信する
サルワカくん

tdの線を消すには以下のCSSを使えば良いかと思います。

.entry-content td {
    border: none;
}

ご確認よろしくお願いします。

返信する
ビリード

アドバイスありがとうございます。CSSに入れましたが線は消せませんでした。

返信する
サルワカくん

・キャッシュは削除されましたか?
・CSSは子テーマのstyle.cssにいれましたか?
親テーマのstyle.cssの先頭などに追加すると優先順位の関係から反映されないかと思います。

返信する
ビリード

CSSの子テーマのstyle.cssに入れて、キャッシュを削除しましたがやはり消えませんでした。別の件はうまくいったので、ちょっと色々いじってみようと思います。

にじます

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

返信する
サルワカくん

お世話になります。
サイトを拝見したところ、tableタグ内にwidth(幅)指定のstyleが含まれてしまっております。
ビジュアルエディタではなく「テキスト」エディタを開くと、以下のようなコードが見つかるかと思います。

<table class=" tb-responsive" style="width: 706.109375px;">

この中のwidth: 706.109375pxという値は、スマホ、PC関わらず適用されてしまいます。
つまり、スマホでもテーブルの幅が706pxになってしまうのです。

おそらくテーブル挿入プラグインの設定によるもの?かと思います。
その場合、設定を変えるか使用プラグインを変えて頂く必要があります。

返信する
にじます

さっそくいじってみると、
TinyMCEAdvancedで追加した「テーブル」を押してでてくる「表のプロパティ」の幅と高さの設定を削除するとうまくできました。
素早いご対応ありがとうございました。

返信する
goga

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

先日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;
}
返信する
サルワカくん

なるほど。何が原因か確認したいので、可能であればテーブルが載っているページのURLを教えて頂けませんか?

返信する
goga

ご返信ありがとうございます!
こちらの返信が遅くなりすみません。
ウェブサイト欄にURLを記入します。
お手数をおかけしますがご確認いただけますと幸いです。

返信する
サルワカくん

素敵なサイトですね!
以下のCSSを追加してみると良いかと思います。

.entry-content tr:not(:last-child) {
  border-bottom: none;
}

それから、スマホ表示だと線がダブってしまっているようなので、

table.table01 th, table.table01 td {
  border: dashed 1px #EE817B;
}

の部分は

@media screen and (min-width: 640px)  {
 table.table01 th, table.table01 td {
  border: dashed 1px #EE817B;
 }
}

に置き換えると良いかと思います。

返信する
goga

アドバイスありがとうございましたm(__)m
表の中の線がきちんと点線で表示され、イメージしていた通りのデザインになりました!

goga

度々すみません。
アドバイス頂いた通りに書き直したのですが、PC表示では上手くいったにもかかわらず、スマホ表示では一部崩れてしまうんです。

アドバイスをいただいたあと、確かに一度は直ったはずなのですが、今日気付いたらスマホ表示だけ崩れてしまっていました。アドバイス後、テーブル以外にカスタマイズしたところが問題なのでしょうか?

どこが悪いのか自分なりに修正をしたのですが余計崩れてしまいまして(^_^;)
PC表示では問題ないということは、@media screenでスマホサイズを指定している部分のコードが何かおかしいということでしょうか?

サルワカくん

具体的にどの部分が崩れていると感じていますか?
前コメントを頂いたときからスマホ表示時は1列になるようなカスタマイズが施されていたので、
意図的にやっているものだと思っておりましたが…。
1列でなく、横並びに戻したいというイメージですか?

ちなみに、スマホ表示時に一部のセルに線が表示されてしまうことについては以下のCSSを追加することで消せるかと思います。

.entry-content th, .entry-content td {
 border-right: none;
}
goga

お世話になります。ご返信ありがとうございますm(__)m

はい、1列にするのは意図的にしております。横並びというわけではありません。
崩れてしまっている点は3点あり、
①スマホ表示時に、バックグラウンドが黒のセルと赤のセルの境目のラインが点線にならず、元のラインが出てしまっている点と、②一番下のセルの外枠に点線が重なっている点、③それに全体の枠の右側に元の表のラインが現れている箇所がある点です。

サルワカくん

なるほど。以下のcssを追加してみてはどうでしょうか。

.entry-content th, .entry-content td {
 border-right: none;
}
.entry-content th {
    border-bottom: dashed 1px #ee807a;
}
.entry-content tr:last-of-type td:last-of-type {
    border-bottom: none;
}
るい

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

返信する
るい

ご返信ありがとうございます。教えていただいたページを知らなくて、「おお!」と思いながら3までやってみたのですが、ダメでした・・・。
ちなみに、フォーマット→スタイルの中は、
card
select.is-compact(非アクティブ)
contact-submit.contact-submit
となっていました。
こちらでなにか設定が漏れていたり、足りないものが
あったりしますか?

返信する
サルワカくん

そのようなエラーを見たことがないので、ちょっと分からないですね。
おそらくなのですが、他のプラグイン(もしくはfunctions.phpでのカスタマイズ)が影響しているような気がします。
一度、TinyMceAdvanced以外のプラグインを全て停止してみて頂けますか?
直った場合、1つずつプラグインを有効に戻すことで、原因となっているプラグインを特定できるかもしれません。

返信する
るい

こんにちは。ご返信ありがとうございます。
結論からお伝えしますと、できました!
functions.php確認→デフォルトのまま変更なしでした。
TinyMceAdvanced以外のプラグインを全て停止→変わらず
TinyMceAdvancedが悪さ?をしているかもと思い、
「デフォルトの設定を復元」ボタンを押してから保存し、
「ビジュアルエディタでドロップダウンが表示されない時の対処法」を
設定すると表示されました!
その他のプラグインを有効化しても大丈夫です。
これで快適に作業できます。
ご回答ありがとうございました!

サルワカくん

ご報告ありがとうございます。問題なく表示されるようになったとのこと、安心しました。
なるほど、TinyMceAdvancedの設定によるものなのかもしれないですね。
今後の参考にさせて頂きます。

たいやき

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

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

返信する
サルワカくん

子テーマのstyle.cssなどに以下を追加してみるとどうでしょうか。

/*表をレスポンシブに*/
#inner-content table.tb-responsive {
 display: block;
 overflow-x: auto;
 width: 100%;
 white-space: nowrap;
 -webkit-overflow-scrolling: touch;
}

#inner-content table caption {
 margin: 0 0 7px;
 color: #9fa6b4;
 font-size: .75em;
 letter-spacing: 1px;
}
#inner-content tr:not(:last-child) {
 border-bottom: 2px solid #e0e0e0;
}
#inner-content td {
 padding: 7px;
 border-right: 2px solid #e0e0e0;
}
#inner-content td:last-child {
 border-right: 0;
}
#inner-content th {
 padding: 7px;
 border-right: 2px solid #e0e0e0;
 border-bottom: 2px solid #e0e0e0;
 background-color: #f8f9fa;
}
返信する
たいやき

先ほど教えていただいたものに
#inner-content table th, table td, table tr {
border: solid 2px #e0e0e0;
}
を追加したら、何とかなりました!
ありがとうございました!!

返信する

コメントを残す

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