質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2532閲覧

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

rkrkrk

総合スコア8

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/08/27 10:55

編集2018/08/28 00:35

前提・実現したいこと

下記画像の比較表、スマホ表示だと現在3商品載せておりますが、
5商品まで追加して、テーブルの高さは変えず、横スクロール化をしたいです。
(以前質問時に解決しなかったのと、進展ありましたので、新しく投稿いたします。)

変更前table

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

上記参考サイトに従い、index.phpとstyle.cssにコードを追加しました。
テストとして、参考サイトのコードもそのままいれてみました。
(コードについては、下部「試したこと」参照)

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

下記画像のように、テーブルが画面の幅に収まって、スクロールできません。
また、列幅も小さくなってしまいました。

参考サイトのテーブル(画像下部の「ウェブコンサルティング」などのテーブル)は、正常にスクロールできているので、
元々の自分のテーブルのcssで何か引っかかってるのかもしてません。
web初心者のため、原因がわからず困っております。。

イメージ説明

試したこと

下記コードをstyle.cssに追加しました。

.hikakuhyo-body { padding: 0 15px; width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }

テスト用に参考サイトのコードもそのままいれました。

.table_container{ width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }

追加後style.css

.hikakuhyo { margin-bottom: 40px;} .hikakuhyo h2 { text-align: center;} @media screen and (min-width:768px){ .hikakuhyo-body { background-image: url(images/hikakuhyo_top_pc_2.jpg); background-repeat: no-repeat; height: 486px; } .hikakuhyo-body2 { background-image: url(images/hikakuhyo_ranking_top_pc_2.jpg); background-repeat: no-repeat; height: 501px; } } @media screen and (max-width:767px){ .hikakuhyo { margin-bottom: 20px;} .hikakuhyo h2 { padding: 0 15px; margin: 0 auto 10px auto; } .hikakuhyo h2 img { max-width: 291px;} .hikakuhyo-body { padding: 0 10px;} .hikakuhyo-body2 { padding: 0 10px;} } @media screen and (min-width:768px){ .hikakuhyo-bottom { background-image: url(images/hikakuhyo_bottom_pc.png); background-repeat: no-repeat; height: 69px; } .hikakuhyo-body ul, .hikakuhyo-bottom ul { display: table; table-layout: fixed; width: 650px; margin: 0 0 0 130px; padding: 6px 0 0 0; } .hikakuhyo-body2 ul, .hikakuhyo-bottom ul { display: table; table-layout: fixed; width: 650px; margin: 0 0 0 130px; padding: 6px 0 0 0; } body.page-id-74 .hikakuhyo-body ul { padding: 28px 0 0 0;} .hikakuhyo-body ul li, .hikakuhyo-bottom ul li { display: table-cell; text-align: center; } .hikakuhyo-body2 ul { padding: 28px 0 0 0;} .hikakuhyo-body2 ul li, .hikakuhyo-bottom ul li { display: table-cell; text-align: center; } .hikakuhyo-body ul li img, .hikakuhyo-bottom ul li img { width: 120px;} .hikakuhyo-body2 ul li img, .hikakuhyo-bottom ul li img { width: 120px;} } @media screen and (max-width:767px){ .hikakuhyo-body { padding: 0 15px; width: 100%; overflow: auto; -webkit-overflow-scrolling: touch;  } .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;} } .table_container{ width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }

index.php

<!-- ▽▽▽ 比較表 ▽▽▽ --> <div class="hikakuhyo"> <?php if (is_mobile()) : // スマホからのアクセスのみ表示 ?> <div class="hikakuhyo-body"> <table> <tr> <th>&nbsp;</th> <th class="product-img"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/calobyeplus_product_s.png" alt="カロバイプラス">カロバイプラス</a></th> <th class="product-img"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/suppon_product_s.png" alt="肥後すっぽんもろみ酢">肥後すっぽんもろみ酢</a></th> <th class="product-img"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/lakubi_product_s.png" alt="ラクビ LAKUBI">ラクビ LAKUBI</a></th> <th class="product-img"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/lakubi_product_s.png" alt="ラクビ LAKUBI">ラクビ LAKUBI</a></th> <th class="product-img"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/lakubi_product_s.png" alt="ラクビ LAKUBI">ラクビ LAKUBI</a></th> <th class="product-img"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/lakubi_product_s.png" alt="ラクビ LAKUBI">ラクビ LAKUBI</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> <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> <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> <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> <td>1,000円</td> <td>1,000円</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> <td><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_komachi_star.png" alt="3" class="star"></td> <td><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_komachi_star.png" alt="3" 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> <tr> <th>詳しく見る</th> <td class="btn-more"><a href="https://calobyeplus.jp"><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://yu-me-ya.com/sp/items/higo-suppon"><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.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.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.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> </tr> </table> </div><!-- .hikakuhyo-body -->

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

.hikakuhyo-body td { width: 25%;}

列幅に関しては、これかなと思ったのですが、1列目しか反映されませんでした。。

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

spookybird

2018/08/27 11:40

「コードよく分かっておらず」のまま作っているのがそもそも間違っているのでは。商用サイトですかね?それを作成することでなにかしら利益を得ているわけですよね。自分でしっかり基礎の勉強もせず、質問サイトに頼りきって自分の利益にするのって、どうかと思います。
dit.

2018/08/28 01:33

商品画像の所、リンクを消すなら</a>も消してください
guest

回答1

0

ベストアンサー

本題と関係ないですが,aタグの開始タグがなかったので付けときました
インデント整えると一目瞭然ですし,そうでなくてもWeb制作用のエディタ使ってると,リントから警告が出るので,そういうのを使ってください.あるいは,Web上のヴァリデータを探してください(cf. 参考回答
(まあ,ふつうにスクショの画像だけでも,左上以外リンク入ってないのが文字色で分かるんですけどね)

html

1<!DOCTYPE html> 2<html> 3<head> 4<title>demo</title> 5</head> 6<body> 7 <!-- ▽▽▽ 比較表 ▽▽▽ --> 8 <div class="hikakuhyo"> 9 <div class="hikakuhyo-body"> 10 <table> 11 <tr> 12 <th>&nbsp;</th> 13 <th class="product-img"> 14 <a href="https://click.j-a-net.jp/1768053/725829/"> 15 <img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/calobyeplus_product_s.png" alt="カロバイプラス"> 16 カロバイプラス 17 </a> 18 </th> 19 <th class="product-img"> 20 <a><!-- ←開始タグ抜けてた--> 21 <img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/suppon_product_s.png" alt="肥後すっぽんもろみ酢"> 22 肥後すっぽんもろみ酢 23 </a> 24 </th> 25 <th class="product-img"> 26 <a><!-- ←開始タグ抜けてた--> 27 <img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/lakubi_product_s.png" alt="ラクビ LAKUBI"> 28 ラクビ LAKUBI 29 </a> 30 </th> 31 <th class="product-img"> 32 <a><!-- ←開始タグ抜けてた--> 33 <img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/lakubi_product_s.png" alt="ラクビ LAKUBI"> 34 ラクビ LAKUBI 35 </a> 36 </th> 37 <th class="product-img"> 38 <a><!-- ←開始タグ抜けてた--> 39 <img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/lakubi_product_s.png" alt="ラクビ LAKUBI"> 40 ラクビ LAKUBI 41 </a> 42 </th> 43 <th class="product-img"> 44 <a><!-- ←開始タグ抜けてた--> 45 <img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/lakubi_product_s.png" alt="ラクビ LAKUBI"> 46 ラクビ LAKUBI 47 </a> 48 </th> 49 </tr> 50 <tr> 51 <th>『実感した!』ユーザーの評価</th> 52 <!--字数制限のため,省略--> 53 </tr> 54 <tr> 55 <th>全額返金保証</th> 56 <!--字数制限のため,省略--> 57 </tr> 58 <tr> 59 <th>価格</th> 60 <!--字数制限のため,省略--> 61 </tr> 62 <tr> 63 <th>1日あたりの価格</th> 64 <!--字数制限のため,省略--> 65 </tr> 66 <tr> 67 <th>オススメ度</th> 68 <!--字数制限のため,省略--> 69 </tr> 70 <tr> 71 <th>詳しく見る</th> 72 <!--字数制限のため,省略--> 73 </td> 74 </tr> 75 </table> 76 </div><!-- .hikakuhyo-body --> 77 </div><!-- ←終了タグ抜けてた--> 78</body> 79</html>

あと,追加したCSSを上げて頂いていますが,内容は理解できているでしょうか?

css

1 .hikakuhyo-body { 2 padding: 0 15px; /*内側の余白の設定*/ 3 width: 100%; /*要素の横幅の設定*/ 4 overflow: auto; /*スクロールバーの挙動制御*/ 5 -webkit-overflow-scrolling: touch; /*safari専用:スムーズスクロール?*/ 6}

-webkit-overflow-scrollingだけ知らなかったので調べたら,

イメージ説明

via -webkit-overflow-scrolling | MDN

「Do not use it on production sites facing the Web」とのことなので,ほぼ無視して良さそうですね

結局,追加されたCSSには,要素を固定する類いのものがなかったことは見ての通りです

本題

掲載されたコードだと確認取りづらいので,デモを作りました
https://thimbleprojects.org/liveasnotes/535364/
イメージ説明
右上のリミックスボタンからコードが見れます

Pattern 1

普通にposition: sticky;を使っています

ただ,実装状況がいまいちなので,2つ目の記事にあったように,しばらくはスクリプトの力が必要です
https://caniuse.com/#search=sticky
イメージ説明

Pattern 2

質問者さんのレベルだと,色々組み合わせ過ぎて何やってるのかすぐには分からないかもしれないのですが,Pattern 2は,こんな感じで実装しています.

html

1<div class="w"> 2 <table> 3 <tr> 4 <th data-cont=""></th> 5 <th>A</th> 6 <th>B</th> 7 <th>C</th> 8 <th>D</th> 9 <th>E</th> 10 <th>F</th> 11 </tr> 12 <tr> 13 <td data-cont="Lorem ipsum dolor sit amet">Lorem ipsum dolor sit amet</td> 14 <td>O</td> 15 <td>O</td> 16 <td>-</td> 17 <td>X</td> 18 <td>O</td> 19 <td>X</td> 20 </tr> 21 <tr> 22 <td data-cont="consectetur adipiscing elit">consectetur adipiscing elit</td> 23 <td>X</td> 24 <td>O</td> 25 <td>X</td> 26 <td>O</td> 27 <td>O</td> 28 <td>X</td> 29 </tr> 30 </table> 31</div>

css

1*,*::before,*::after{ 2 padding: 0; 3 margin: 0; 4 box-sizing: border-box; 5} 6 7.w{ 8 position: relative; 9 border: 5px solid #ddd; 10} 11 12table{ 13 display: block; 14 max-width: 100%; 15 background: skyblue; 16 border-spacing: 0; 17 overflow-x: auto; 18 outline: 1px solid skyblue; 19} 20 21th, 22td, 23tr >:first-child::before{ 24 padding: .25em .5em; 25} 26 27tr >th, 28tr >td{ 29 min-width: 5em; 30 max-width: 5em; 31 text-align: center; 32 word-break: break-all; 33 background: #fff; 34 border: 0 solid green; 35 border-right: 1px solid green; 36 border-bottom: 1px solid green; 37} 38 39tr >:first-child::before{ 40 content: attr(data-cont); 41 position: absolute; 42 left: 0; 43 display: block; 44 width: 5em; 45 border: 1px solid red; 46 background: rgba(255, 255, 255, .7); 47 margin-top: calc(-.25em - 1px); 48}
  1. 一番左側の要素(trの最初の子要素)をどうにかしたいので,:first-child擬似クラスを利用

  2. position:absolute;を指定した要素は,直近のposition:relative;が指定された祖先要素を基準に配置される

.w{position: relative;}tr >:first-child::before{position: absolute;}

  1. 高さを継承するには,当該要素の子要素である必要がある

::before擬似要素の利用,height: inherit;
(※height:100%;だと,.wの高さが代入されてしまう)

  1. 属性値を使って,柔軟に表示を変えたい

→擬似クラスのcontentプロパティにattr(data-cont)で,勝手に作ったdata-cont属性の中の値を代入

  1. そのほか微調整

(ネガティブマージンでcalc()を使って位置を上にずらしたり,border-spacing: 0;したり,word-break: break-all;したり...)

分かりやすく説明しろといわれても,ただただ文章が長くなるだけなので,この辺で切り上げます

要は,色々頑張ったらそれっぽいのができるので,ご自分でいろいろ試して頑張ってください,ということです.以上

ちなみにですがoverflow-wrapはMicrosoftの独自拡張だったword-wrapが多くのブラウザで実装されたためにCSS3 Text仕様書で現在のoverflow-wrapに改名されました。改名された現在でもword-wrapは今のところ問題なく使えます。

投稿2018/08/27 16:44

編集2018/08/27 16:48
liveasnotes

総合スコア1284

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

liveasnotes

2018/08/28 02:50

いま,質問にあったリンクをはじめて踏んだんですけど,完全に誤解してました.すみません ただ横スクロールさえできればよかったんですね,つい,見やすい表を作ろうとしてしまいました...(汗 次からはちゃんと参考リンク踏みます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問