Web制作 当ブログは、プロモーションが含まれます。

スマートフォン表示ではみ出したtableを横スクロールさせるためのCSS

『table要素をスマートフォン画面の幅に合わせる時に使うCSS』では、Webサイト・ブログをスマートフォン表示したときに、tableが画面からはみ出してしまう問題の解決方法として、画面の幅に合わせるためのCSSを紹介しました。

今回は、はみ出したtableを横スクロールさせるためのCSSを紹介します。

スポンサーリンク

はみ出したtableの例

次は、スマートフォンで表示したときに、はみ出してしまうtableの例です。

商品名 インターネット回線
初期費用 事務手数料3000円 ＋ 標準工事費0円
プラン 30Mコース 50Mコース 100Mコース 200Mコース 1ギガコース
月額料金 120,000円 180,000円 250,000円 290,000円 300,000円
備考 通信料、プロバイダ料、回線終端装置使用料がすべて含まれた価格です。

【HTML】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<table border="1" cellspacing="0" cellpadding="5">
<tbody>
<tr>
<th>商品名</th>
<td colspan="5">インターネット回線</td>
</tr>
<tr>
<th>初期費用</th>
<td colspan="5">事務手数料3000円 ＋ 標準工事費0円</td>
</tr>
<tr>
<th>プラン</th>
<td>30Mコース</td>
<td>50Mコース</td>
<td>100Mコース</td>
<td>200Mコース</td>
<td>1ギガコース</td>
</tr>
<tr>
<th>月額料金</th>
<td>120,000円</td>
<td>180,000円</td>
<td>250,000円</td>
<td>290,000円</td>
<td>300,000円</td>
</tr>
<tr>
<th>備考</th>
<td colspan="5">通信料、プロバイダ料、回線終端装置使用料がすべて含まれた価格です。</td>
</tr>
</tbody>
</table>

【CSS】

1
2
3
table{
width:100%;
}

tableを横スクロールさせる方法

次は、tableを横スクロールに対応させた例です。

商品名 インターネット回線
初期費用 事務手数料3000円 ＋ 標準工事費0円
プラン 30Mコース 50Mコース 100Mコース 200Mコース 1ギガコース
月額料金 120,000円 180,000円 250,000円 290,000円 300,000円
備考 通信料、プロバイダ料、回線終端装置使用料がすべて含まれた価格です。

このようにtableを横スクロールさせるには、HTMLとCSSを編集すればOKです。

1、HTMLの編集

まずは、tableを「divタグ」で囲みます。ここでは、そのdivタグに”scroll”というclass名を付けました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div class="scroll">
<table border="1" cellspacing="0" cellpadding="5">
<tbody>
<tr>
<th>商品名</th>
<td colspan="5">インターネット回線</td>
</tr>
<tr>
<th>初期費用</th>
<td colspan="5">事務手数料3000円 ＋ 標準工事費0円</td>
</tr>
<tr>
<th>プラン</th>
<td>30Mコース</td>
<td>50Mコース</td>
<td>100Mコース</td>
<td>200Mコース</td>
<td>1ギガコース</td>
</tr>
<tr>
<th>月額料金</th>
<td>120,000円</td>
<td>180,000円</td>
<td>250,000円</td>
<td>290,000円</td>
<td>300,000円</td>
</tr>
<tr>
<th>備考</th>
<td colspan="5">通信料、プロバイダ料、回線終端装置使用料がすべて含まれた価格です。</td>
</tr>
</tbody>
</table>
</div>

2、CSSを編集

続いては、先ほど追加した「divタグ（.scroll）」に、「overflow: auto;」「white-space: nowrap;」「::-webkit-scrollbar」「::-webkit-scrollbar-track」「::-webkit-scrollbar-thumb」のCSSを指定します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.scroll table{
width:100%;
}
.scroll{
overflow: auto;　　　　/*tableをスクロールさせる*/
white-space: nowrap;　　/*tableのセル内にある文字の折り返しを禁止*/
}
.scroll::-webkit-scrollbar{　　/*tableにスクロールバーを追加*/
 height: 5px;
}
.scroll::-webkit-scrollbar-track{　　/*tableにスクロールバーを追加*/
 background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {　　/*tableにスクロールバーを追加*/
 background: #BCBCBC;
}

指定前

指定前

指定後

指定後

これで完了です。スマートフォンで表示したとき、tableを横にスクロールすることが可能になります。もちろん、スクロールバーも表示されます。

解説

ここからは、先ほど、編集したCSSについてもっと詳しく解説します。

tableをスクロールさせる

tableをスクロールさせるために「overflow: auto;」を追加しました。

overflowとは、画面に収まりきらない内容を、どのように処理するかを指定するCSSです。今回は、スクロールして見られるようにする”auto”を指定しています。

tableのセル内にある文字の折り返しを禁止する

tableのセル内にある文字の折り返しを禁止するために「white-space: nowrap;」を追加しました。

white-spaceとは、要素内の「半角スペース」「タブ（TAB）」「改行」をどのように処理するかを指定するCSSです。今回は、行の折り返しを禁止する”nowrap”を指定しています。

tableにスクロールバーを表示する

tableにスクロールバーを表示するために「::-webkit-scrollbar」「::-webkit-scrollbar-track」「::-webkit-scrollbar-thumb」を追加しました。

::-webkit-scrollbarは、スクロールバー全体のデザインを指定します。
::-webkit-scrollbar-trackは、スクロールバーの両端にある矢印以外のデザインを指定します。
::-webkit-scrollbar-thumbは、スクロールバーの動く部分（スクロールボックス）のデザインを指定します。

WordPressでCSS編集する方法

WordPressでブログを構築している場合は、まず、管理画面の左メニューから「外観」→「テーマの編集」を開きます。そして、右にある「style.css」をクリックしましょう。

あとは、「style.css」内のどこでもいいので、適当な場所に先ほどのコードをコピペ。最後に「ファイルを更新」ボタンを押して保存します。

スポンサードリンク



15 件のコメント

  • ブログでレスポンシブのテンプレートに横に長ーい表テーブルを貼り付ける方法を検索しているところ、こちらの記事がもっともわかりやすいものでした。参考にさせていただきました。あざーす！

    返信する

  • 初めまして。ワードプレスで作ったサイトのテーブルタグのレスポンシブ対応に困り、いろいろと探して　こちらのページにたどり着きました。

    こちらのやり方ですと、iPhoneで自分のサイトの表が　右左に指でスクロール(動かす事)できてとてもよい感じです。

    よい方法を教えていただきましてありがとうございます。

    返信する

    • はじめまして！
      ご丁寧にありがとうございます。
      そう言っていただけると、まとめた甲斐があります。
      今後も良い情報発信していけるように心がけますのでよろしくお願いします。

      返信する

  • 初めまして！突然失礼します。Wordpressでブログを運営しているのですが、表にスクロール機能を付けたく、こちらのブログを拝見させていただきました。ただ、HTML/CSSにかなり疎く、恥ずかしい限りですが、このコードたちをどこに貼り付けたらいいのか分かりません。(笑)
    もしよろしければ、Wordpressのどのページのどこに貼り付けるのかというフローまで教えていただければかなり幸いです。面倒なお願いで大変恐縮ですが、できる限りの対応でかまいません。何卒宜しくお願い致します。

    返信する

    • こんにちは！
      わざわざ画面のスクショまで貼っていただき、ありがとうございます。
      追記していただいた箇所を参考にさせていただき、表も見事にスクロールできるようになりました！

      細かいところもご丁寧に記載していただいているので、非常にわかりやすかったです。
      また分からないことがあれば、こちらのブログを拝見させてください。
      改めて、本当にありがとうございました！

      返信する

      • こんにちは！
        わざわざ丁寧にお礼のお言葉ありがとうございます。
        無事に解決できたようで良かったです。
        できる限り、Web制作に関する記事も増やしていきたいと思っていますので、今後ともよろしくお願いします。

        返信する

    • 初めまして！コメントありがとうございます。
      確かに僕もWordPressを始めだした頃は、右も左も分からない、手探りの状態でした。
      HTMLに関しては、記事を編集する時に表示方法を「ビジュアル」から「テキスト」に変更すれば、HTML編集できるようになります。あとは、本記事を参考にtableを「divタグ」で囲ってやってください。
      （HTMLは、最初の内は訳のわかない暗号文のように見えますが、そのうち分かってきますので頑張ってください！）
      CSSに関しては、ちょっとややこしいので、記事下に追記しました。そのままコピペしてあげれば大丈夫です。

      返信する

  • 初めまして、ワードプレスでテーブルの表示に困っていたところ、こちらのサイトにたどり着きました。
    丁寧な解説ありがとうございます。たいへん、参考になりました。

    一点だけ当方の環境でうまくいかないところがあります。
    では、nowrap　が効かないようで、
    以下のコードでうまく動いています。

    この使い方でも、問題ないでしょうか？　また、当方の環境で正常に動作させるための助言などあれば、お願いいたします（ブラウザはクロームです）。

    返信する

    • 申し訳ありません、自己解決しました。
      私が記述したCSSに入っていた、全角ブランクが原因のようです。
      お騒がせしました。　今後とも、よろしくお願いいたします。

      返信する

  • はじめまして。WordPressの投稿ページ用に上記のコードを追加してみたのですが、うまくできず悩んでいます。すべてコピペでHTML、style.cssに貼り付けてみたのですが、うまく表示できません。他プラグインとのコンフリクトが起こったりしますか？原因がわからず、です。

    返信する

    • 他プラグインと競合している可能性は十分にあります。
      回避策としては、それぞれのCSSの前に「#container」を追加すると良いかもしれません。
      #container .scroll{
      #container .scroll::-webkit-scrollbar{
      といった具合です。
      他プラグインとのコンフリクトを避けたいのであれば、Google検索で「CSS　優先順位」と検索して、しっかりと抑えておくと良いかと思います。
      また、Google Chromeには「検証（右クリック）」という大変便利なデベロッパーツールがありますので、ぜひご活用ください。

      返信する

    • コメントを残す

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

       

    RECOMMENDこちらの記事も人気です。

    ABOUTこの記事をかいた人

    サラリーマンをしながら、当ブログを運営していましたが、2018年に独立し現在はフリーランスとして活動しています。今まで、数々のWebサイト・ブログを構築してきました。このブログでは、今までの経験で得た知識を活かし、Web制作・SEO関連を中心に、最新のIT関連ニュースを発信。また、ファイナンシャル・プランナー技能士の資格を活かして金融関係の情報も発信しています。