カテゴリー WordPressウェブデザイン

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

スポンサーリンク

 

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

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

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

 

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

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

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

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

 

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

 

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

スポンサーリンク

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

 

 

STEP1.表を作る

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

今回ご紹介するのは、「はじめに」で掲載している表テーブルの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円〜  

 

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

 

 

STEP1.横スクロールできる様に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に変更するなどすれば、パソコンではスクロールなしスマホなど小さい画面で見た時にはスクロールありで表を崩さずに表示することが出来ます。

 

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

 

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

 

 

よくある質問

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

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

 

 

 

スポンサーリンク
ビジネスクラフト

Share
Published by
ビジネスクラフト
タグ HTML・XHTMLホームページ制作

Recent Posts

  • インターネットの使い方

Mac版Excelで改行する方法

MicrosoftOfficeのExce…

7か月 ago
  • WordPress
  • インターネットの使い方
  • ウェブデザイン
  • ネットビジネス

【5分】WordPressサイトをプラグインでAMP対応する方法・導入手順

はじめに モバイル検索のアクセス、コンバ…

8か月 ago
  • コピーライティング

誰でも書ける論文・レポートの書き方簡単10ステップ

誰でも論文・レポートを書ける究極の方法簡…

8か月 ago
  • WordPress
  • インターネットの使い方
  • ウェブデザイン

AMPが表示されない時のワードプレス対処方法【AMP or WP Accelerated Mobile Pages】

表示されない症状 ・AMPページにアクセ…

8か月 ago
  • インターネットの使い方

LINEタイムラインに流れてきた投稿を非表示にする方法

はじめに LINE(ライン)のタイムライ…

8か月 ago
  • インターネットの使い方

LINEのタイムライン「いいね」「シェア」の使い方と設定方法

はじめに LINE(ライン)のタイムライ…

8か月 ago