前提・実現したいこと
下記画像の比較表、スマホ表示だと現在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> </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/ツールのバージョンなど)
貴重なお時間ありがとうございます。
コードよく分かっておらず、行き詰ってます。。
他に必要な情報あればお申し付けください。宜しくお願い致します。
回答3件
あなたの回答
tips
プレビュー