WordPressスマホで表テーブルを横スクロールする方法【簡単HTMLコピペ】

 

はじめに：この記事を読んだらできる事

下の表のように、簡単に表を横スクロールさせることができる様になります。

 

WordPressで表テーブルを作った時に、パソコンから見ると綺麗にできていますが、スマホから見ると表が崩れて表が途中で切れてしまうなど問題がある時、この記事を参考にしてみてください。

今回は、スマホから見ても綺麗に表を表示させる方法をご紹介します。

ワードプレスのプラグインTinyMCE Advancedなどで表を挿入している場合もこの方法で対応できますのでHTML初心者の方もご安心ください。

コピペで簡単にできるのでお困りの方は是非、試してみてください。

 

パソコンで見ると表が綺麗に見えます。だけど・・・

 

スマホだと表の右側が切れてしまって見れません。

スマホで表示した時に表を横にスクロールできる様にすることで、スマホからでも表をすべて見ることができます。

 

 

STEP１.表を作る

まず、表示したい表を作ることから始めていきます。

今回ご紹介するのは、「はじめに」で掲載している表テーブルのHTMLコードです。

 

<!--表-->
<table style="width: 600px;"><!--幅を指定する-->
<tbody>
<tr>
<td style="width: 143px;"><strong> 項目</strong></td>
<td style="width: 107px;"><strong> 単価</strong></td>
<td style="width: 256px;"><strong> 備考</strong></td>
</tr>
<tr>
<td style="width: 143px;"> PCソフト設定</td>
<td style="width: 107px;"> 8,000円〜</td>
<td style="width: 256px;"> </td>
</tr>
<tr>
<td style="width: 143px;"> PC操作指導</td>
<td style="width: 107px;"> 8,000円〜</td>
<td style="width: 256px;"> 2時間迄／以降は1時間3,000円</td>
</tr>
<tr>
<td style="width: 143px;"> PC診断</td>
<td style="width: 107px;"> 5,000円〜</td>
<td style="width: 256px;"> </td>
</tr>
<tr>
<td style="width: 143px;"> PC動作軽量化</td>
<td style="width: 107px;"> 12,000円〜</td>
<td style="width: 256px;"> </td>
</tr>
<tr>
<td style="width: 143px;"> PC修理</td>
<td style="width: 107px;"> 5,000円〜</td>
<td style="width: 256px;"> 内容により料金は異なります</td>
</tr>
<tr>
<td style="width: 143px;"> その他作業</td>
<td style="width: 107px;"> 5,000円〜</td>
<td style="width: 256px;"> </td>
</tr>
</tbody>
</table>

 

※幅をwidthで指定しておくことを忘れない様に。ここ重要。

ウェブサイト（ブログやホームページ）のカラムに合わせて指定しましょう。

 

すると下のように表が出来上がります。

 

項目	単価	備考
PCソフト設定	8,000円〜
PC操作指導	8,000円〜	2時間迄／以降は1時間3,000円
PC診断	5,000円〜
PC動作軽量化	12,000円〜
PC修理	5,000円〜	内容により料金は異なります
その他作業	5,000円〜

 

ここまで出来たら、次に横スクロールできるようにしていきます。

 

 

STEP１.横スクロールできる様に1行追加

 

<div style="overflow: auto;">

<table style="width: 600px;"><!--幅を指定する-->
<tbody>
<tr>
<td style="width: 143px;"><strong> 項目</strong></td>
<td style="width: 107px;"><strong> 単価</strong></td>
<td style="width: 256px;"><strong> 備考</strong></td>
</tr>
<tr>
<td style="width: 143px;"> PCソフト設定</td>
<td style="width: 107px;"> 8,000円〜</td>
<td style="width: 256px;"> </td>
</tr>
<tr>
<td style="width: 143px;"> PC操作指導</td>
<td style="width: 107px;"> 8,000円〜</td>
<td style="width: 256px;"> 2時間迄／以降は1時間3,000円</td>
</tr>
<tr>
<td style="width: 143px;"> PC診断</td>
<td style="width: 107px;"> 5,000円〜</td>
<td style="width: 256px;"> </td>
</tr>
<tr>
<td style="width: 143px;"> PC動作軽量化</td>
<td style="width: 107px;"> 12,000円〜</td>
<td style="width: 256px;"> </td>
</tr>
<tr>
<td style="width: 143px;"> PC修理</td>
<td style="width: 107px;"> 5,000円〜</td>
<td style="width: 256px;"> 内容により料金は異なります</td>
</tr>
<tr>
<td style="width: 143px;"> その他作業</td>
<td style="width: 107px;"> 5,000円〜</td>
<td style="width: 256px;"> </td>
</tr>
</tbody>
</table>
</div>

 

 

先ほど作ったコードを<div style=”overflow: auto;”>と</div>で囲います。

これで幅（width）に収まった状態でスクロールできるようになりました。

ページに合わせて730pxに変更するなどすれば、パソコンではスクロールなしスマホなど小さい画面で見た時にはスクロールありで表を崩さずに表示することが出来ます。

 

 

※上の表は最初に紹介したものと同じですが、widthを1000pxにしています。

 

 

よくある質問

Q.行を増やしたい時はどうすればいいですか？

A.行を増やしたい時は、ワードプレス のビジュアルエディタからテキストエディタに変更し、<tr>〜</tr>までをコピペして繋げていくことで行を増やすことができます。（ワードプレスのビジュアルエディタとテキストエディタについては「WordPress投稿ページ・固定ページの使い方」を参考。）

 

 

 

]]>