スマホ表示で、tableをはみ出して横スクロールさせるCSS/PHP

前提・実現したいこと

下記画像の比較表、スマホ表示だと現在3商品載せておりますが、
5商品まで追加して、テーブルの高さは変えず、横スクロール化をしたいです。

参考サイト
上記参考サイトが、まさにやりたいことなので、分かりやすいかと思います。
スマホ表示でテーブルを横スクロールできるようにしたいです。

上記参考サイトに従い、index.phpとstyle.cssにコードを追加しました。
（コードについては、下部「試したこと」参照）

発生している問題・エラーメッセージ

下記画像のように、テーブルが崩れてしまいます。文字化けも起こります。
web初心者のため、原因がわからず困っております。。

試したこと

元々のstyle.css

@media screen and (max-width:767px){

  .hikakuhyo-body { padding: 0 15px;}
  
  .hikakuhyo-body table {
      border-left: 1px solid #d5c4a9;
      border-top: 1px solid #d5c4a9;
  }
  
  .hikakuhyo-body th,
  .hikakuhyo-body td {
      border-right: 1px solid #d5c4a9;
      border-bottom: 1px solid #d5c4a9;
      text-align: center;
      padding: 10px 5px;
      width: 25%;
  }
  
  .hikakuhyo-body th {
      font-size: 1.2rem;
      line-height: 1.4;
      background-color: #f8f2ec;
  }
  
  .hikakuhyo-body th.product-img {
      font-size: 1.0rem;
      background-color: #fff;
      color: #a68349;
      vertical-align: top;
      padding: 5px;
  }
  
  .hikakuhyo-body th.product-img img {
      display: block;
      margin: 0 auto;
  }
  
  .hikakuhyo-body th.product-img img.ranking-icon {
      width: 28px;
      margin-bottom: 4px;
  }
  
  .hikakuhyo-body td.btn-more { padding: 8px 5px 5px 5px;}
  
  .hikakuhyo-body td strong { color: #ed1e79; /* ピンク */ }
  
  .hikakuhyo-body td small { font-size: 1.0rem;}

}

style.cssに追加したコード

.hikakuhyo-body table{
overflow: auto;　　　　/*tableをスクロールさせる*/
white-space: nowrap;　　/*tableのセル内にある文字の折り返しを禁止*/
}
  .hikakuhyo-body table::-webkit-scrollbar{　　/*tableにスクロールバーを追加*/
 height: 5px;
}
  .hikakuhyo-body table::-webkit-scrollbar-track{　　/*tableにスクロールバーを追加*/
 background: #F1F1F1;
}
  .hikakuhyo-body table::-webkit-scrollbar-thumb {　　/*tableにスクロールバーを追加*/
 background: #BCBCBC;
}****
  .hikakuhyo-body table {
      width:100%;
  }

style.css　追加後

@media screen and (max-width:767px){

  .hikakuhyo-body { padding: 0 15px;}

  .hikakuhyo-body table{
overflow: auto;　　　　/*tableをスクロールさせる*/
white-space: nowrap;　　/*tableのセル内にある文字の折り返しを禁止*/
}
  .hikakuhyo-body table::-webkit-scrollbar{　　/*tableにスクロールバーを追加*/
 height: 5px;
}
  .hikakuhyo-body table::-webkit-scrollbar-track{　　/*tableにスクロールバーを追加*/
 background: #F1F1F1;
}
  .hikakuhyo-body table::-webkit-scrollbar-thumb {　　/*tableにスクロールバーを追加*/
 background: #BCBCBC;
}
  .hikakuhyo-body table {
      width:100%;
      border-left: 1px solid #d5c4a9;
      border-top: 1px solid #d5c4a9;
  }

これより下は一緒です。

index.php　追加したもの
テストのため、各trに1列追加しました。元々は、3列です。

      <!-- ▽▽▽ 比較表 ▽▽▽ -->
      
      <div class="hikakuhyo">

        <?php if (is_mobile()) : // スマホからのアクセスのみ表示 ?>
          
              
          <div class="hikakuhyo-body">
              
            <table>
              <tr>
                <th>&nbsp;</th>
               <th class="product-img"><a href="https://click.j-a-net.jp/1768053/725829/"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/calobyeplus_product_s.png" alt="カロバイプラス">カロバイプラス</a></th>
                <th class="product-img"><a href="https://www.u-u-kan.jp/item/01/lb/"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/suppon_product_s.png" alt="肥後すっぽんもろみ酢">肥後すっぽんもろみ酢</a></th>
                <th class="product-img"><a href="https://www.fancl.co.jp/pub/ot/index_lis.html"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/otonakalomit_product_s.png" alt="ラクビ　LAKUBI">ラクビ　LAKUBI</a></th
                <th class="product-img"><a href="https://www.otsuka-plus1.com/shop/formlp/kenja_trial1504.aspx"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/kenja_product_s.png" alt="賢者の食卓">賢者の食卓</a></th>
              </tr>
              <tr>
                <th>『実感した！』ユーザーの評価</th>
                <td><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_otona_point.png" alt="98点" class="point"></td>
                <td><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_surattokiriri_point.png" alt="92点" class="point"></td>
                <td><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_kokorokaradaanshinyousan_point.png" alt="90点" class="point"></td>
                <td><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_kokorokaradaanshinyousan_point.png" alt="90点" class="point"></td>
              </tr>
              <tr>
                <th>全額返金保証</th>
                <td><strong class="pink">あり</strong></td>
                <td>なし</td>
                <td>あり</td>
                <td>あり</td>
              </tr>
              <tr>
                <th>価格</th>
                <td><strong class="pink">500円</strong></td>
                <td>2,740円</td>
                <td>1,000円</td>
                <td>1,000円</td>
              </tr>
              <tr>
                <th>1日あたりの価格</th>
                <td><strong class="pink">17円</strong></td>
                <td>88円</td>
                <td>33円</td>
                <td>33円</td>
              </tr>
              <tr>
                <th>オススメ度</th>
                <td><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_otona_star.png" alt="5" class="star"></td>
                <td><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_surusuru_star.png" alt="4" class="star"></td>
                <td><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_komachi_star.png" alt="3" class="star"></td>
              </tr>
                <td><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_komachi_star.png" alt="3" class="star"></td>
              </tr>
              <tr>
                <th>詳しく見る</th>
                <td class="btn-more"><a href="https://click.j-a-net.jp/1768053/725829/"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_btn_more_sp.png" alt="公式サイトへ"></a></td>
                <td class="btn-more"><a href="https://www.u-u-kan.jp/item/01/lb/"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_btn_more_sp.png" alt="公式サイトへ"></a></td>
                <td class="btn-more"><a href="https://www.fancl.co.jp/pub/ot/index_lis.html"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/im              </tr>
                <td class="btn-more"><a href="https://www.fancl.co.jp/pub/ot/index_lis.html"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_btn_more_sp.png" alt="公式サイトへ"></a></td>
            </table>
            
          </div><!-- .hikakuhyo-body -->

補足情報（FW/ツールのバージョンなど）

貴重なお時間ありがとうございます。
コードよく分かっておらず、行き詰ってます。。
他に必要な情報あればお申し付けください。宜しくお願い致します。

m.ts10806

2018/08/22 07:47

実URLで何かしら情報提供などしているサイトだと広告目的と捉えられかねないので余程必要に迫られない限りは該当箇所の画面キャプチャのみに留めておいた方が良いかもしれません。またURLはマークダウンの機能でリンクにできるので調整いただければと思います。

rkrkrk

2018/08/22 08:07

ご丁寧にありがとうございます！なるほどですね、、修正いたしました。失礼いたしました！

SaintKnowledge

2018/08/22 08:10

WordPressをお使いのようですので、使っているテーマやプラグインに依存するかもしれません。タグに「WordPress」を追加した方がより良い回答が得られるかもしれません。

行動規範の内容に同意します

回答3件

商品名のところ(ラクビ)</th>の>が無い(</thになってる)
オススメ度のところ</tr>が１つ多い(追加した<td>が外に出て、そのあとさらに</tr>がついてる)
詳しく見るのところ3つ目のimgタグ部分が途中で消えてる
4つ目のtdがtrの外に出ている

とりあえず気になった部分を指摘しておきます。

HTML部分だけ修正しておきました

html
1<div class="hikakuhyo-body">
2
3  <table>
4    <tr>
5      <th>&nbsp;</th>
6      <th class="product-img"><a href="https://click.j-a-net.jp/1768053/725829/"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/calobyeplus_product_s.png" alt="カロバイプラス">カロバイプラス</a></th>
7      <th class="product-img"><a href="https://www.u-u-kan.jp/item/01/lb/"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/suppon_product_s.png" alt="肥後すっぽんもろみ酢">肥後すっぽんもろみ酢</a></th>
8      <th class="product-img"><a href="https://www.fancl.co.jp/pub/ot/index_lis.html"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/otonakalomit_product_s.png" alt="ラクビ　LAKUBI">ラクビ　LAKUBI</a></th>
9      <th class="product-img"><a href="https://www.otsuka-plus1.com/shop/formlp/kenja_trial1504.aspx"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/kenja_product_s.png" alt="賢者の食卓">賢者の食卓</a></th>
10    </tr>
11    <tr>
12      <th>『実感した！』ユーザーの評価</th>
13      <td><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_otona_point.png" alt="98点" class="point"></td>
14      <td><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_surattokiriri_point.png" alt="92点" class="point"></td>
15      <td><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_kokorokaradaanshinyousan_point.png" alt="90点" class="point"></td>
16      <td><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_kokorokaradaanshinyousan_point.png" alt="90点" class="point"></td>
17    </tr>
18    <tr>
19      <th>全額返金保証</th>
20      <td><strong class="pink">あり</strong></td>
21      <td>なし</td>
22      <td>あり</td>
23      <td>あり</td>
24    </tr>
25    <tr>
26      <th>価格</th>
27      <td><strong class="pink">500円</strong></td>
28      <td>2,740円</td>
29      <td>1,000円</td>
30      <td>1,000円</td>
31    </tr>
32    <tr>
33      <th>1日あたりの価格</th>
34      <td><strong class="pink">17円</strong></td>
35      <td>88円</td>
36      <td>33円</td>
37      <td>33円</td>
38    </tr>
39    <tr>
40      <th>オススメ度</th>
41      <td><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_otona_star.png" alt="5" class="star"></td>
42      <td><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_surusuru_star.png" alt="4" class="star"></td>
43      <td><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_komachi_star.png" alt="3" class="star"></td>
44      <td><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_komachi_star.png" alt="3" class="star"></td>
45    </tr>
46    <tr>
47      <th>詳しく見る</th>
48      <td class="btn-more"><a href="https://click.j-a-net.jp/1768053/725829/"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_btn_more_sp.png" alt="公式サイトへ"></a></td>
49      <td class="btn-more"><a href="https://www.u-u-kan.jp/item/01/lb/"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_btn_more_sp.png" alt="公式サイトへ"></a></td>
50      <td class="btn-more"><a href="https://www.fancl.co.jp/pub/ot/index_lis.html"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_btn_more_sp.png" alt="公式サイトへ"></a></td>
51      <td class="btn-more"><a href="https://www.fancl.co.jp/pub/ot/index_lis.html"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_btn_more_sp.png" alt="公式サイトへ"></a></td>
52    </tr>
53  </table>
54
55</div><!-- .hikakuhyo-body -->

投稿2018/08/22 10:29

編集2018/08/23 05:56

dit.

総合スコア3235

rkrkrk

2018/08/23 09:08

訂正ありがとうございます！失礼いたしました…！

行動規範の内容に同意します

ベストアンサー

dit. さんが修正いただいたHTMLをもとに、下記のCSSでおそらく実装可能と思います。
主に修正した点
・overflow:auto; は　.hikakuhyo-body に適用
・tableの幅は100%にしない（autoに変更）
・セル内のテキストの折り返しを禁止したいならtableではなくth,tdに適用の方が良さそう
・th,tdに記述してあったwidthの指定を削除
・tdの幅を揃えるためにmin-widthを追加

念のため、、、、なのですが、以下も確認してください。
文字化け：<meta charset="UTF-8"> など適切な文字コードを<head>内に記述（参照：http://www.htmq.com/tutorial/27_1.shtml）
viewport設定：<meta name="viewport" content="width=device-width"> が<head>内に適切に記載されているか

CSS
1
2.hikakuhyo-body { 
3  padding: 0 15px;
4  overflow: auto;
5}
6
7.hikakuhyo-body table{
8}
9.hikakuhyo-body table::-webkit-scrollbar{　　/*tableにスクロールバーを追加*/
10  height: 5px;
11}
12.hikakuhyo-body table::-webkit-scrollbar-track{　　/*tableにスクロールバーを追加*/
13  background: #F1F1F1;
14}
15.hikakuhyo-body table::-webkit-scrollbar-thumb {　　/*tableにスクロールバーを追加*/
16  background: #BCBCBC;
17}
18.hikakuhyo-body table {
19  width: auto;
20  border-left: 1px solid #d5c4a9;
21  border-top: 1px solid #d5c4a9;
22}
23.hikakuhyo-body th,
24.hikakuhyo-body td {
25  border-right: 1px solid #d5c4a9;
26  border-bottom: 1px solid #d5c4a9;
27  text-align: center;
28  padding: 10px 5px;
29}
30
31.hikakuhyo-body th {
32  font-size: 1.2rem;
33  line-height: 1.4;
34  background-color: #f8f2ec;
35  white-space: nowrap;
36}
37
38.hikakuhyo-body th.product-img {
39  font-size: 1.0rem;
40  background-color: #fff;
41  color: #a68349;
42  vertical-align: top;
43  padding: 5px;
44}
45
46.hikakuhyo-body th.product-img img {
47  display: block;
48  margin: 0 auto;
49}
50
51.hikakuhyo-body th.product-img img.ranking-icon {
52  width: 28px;
53  margin-bottom: 4px;
54}
55
56.hikakuhyo-body td
57{
58  min-width: 200px;
59}
60
61.hikakuhyo-body td.btn-more { padding: 8px 5px 5px 5px;}
62
63.hikakuhyo-body td strong { color: #ed1e79; /* ピンク */ }
64
65.hikakuhyo-body td small { font-size: 1.0rem;}
66
67
68