サポート » 使い方全般 » はみ出したtableを横スクロール

  • 解決済 seta181030

    (@seta181030)


    スマホ表示ではみ出したtableを横スクロールさせるために、参考になるサイトがありましたので
    そのサイトをそのまま設定してみましたが、タイトルとそれ以外の部分も同時に横にスクロールされるはずですが、タイトル部分がPCサイズではきちんと表示されますがスマホ表示になるとサイズ半分位になってしまいタイトル以外の部分が被ってしまいます。

    どこの設定が悪かったのでしょうか。同じサイトで設定した方は問題なく出来ているようです。

    ご教示頂けますと助かります。よろしくお願いします。

    ———————————————————————————-
    <div class=”scroll”>
    <table border=”1″ cellspacing=”0″ cellpadding=”5″>
    <tbody>
    <tr>
    <th>商品名</th>
    <td colspan=”5″>AAAAAA</td>
    </tr>
    <tr>
    <th>手数料</th>
    <td colspan=”5″>処理手数料300円</td>
    </tr>
    <tr>
    <th>プラン</th>
    <td>Aコース</td>
    <td>Bコース</td>
    <td>Cコース</td>
    <td>Dコース</td>
    <td>E</td>
    </tr>
    <tr>
    <th>送料</th>
    <td>1000円</td>
    <td>2000円</td>
    <td>3000円</td>
    <td>4000円</td>
    <td>35000円</td>
    </tr>
    <tr>
    <th>備考</th>
    <td colspan=”5″>商品代金、送料、手数料がすべて含まれた価格です。</td>
    </tr>
    </tbody>
    </table>
    </div>
    ———————————————————————————-
    CSS

    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;
    }

    • このトピックはseta181030が4年、 1ヶ月前に変更しました。
10件の返信を表示中 - 1 - 10件目 (全10件中)
  • こんにちは

    テーブルの幅の最小値(min-width)を指定するといいような気がしますが・・・

    table {
    	width: 100%;
    	min-width: 500px; /* ← 追加 */
    }
    トピック投稿者 seta181030

    (@seta181030)

    ご連絡が遅くなりました。
    先程設定をしましたが、やはり同じ現象でした。

    実際に、動作を確認することのできるページの URL を提示してもらえると、回答しやすいのですが、可能でしょうか?

    CG

    (@du-bist-der-lenz)

    実際のサイトでなくてもいいけど、同じ症状を再現したページを提示していただくほうが、こうした課題は回答しやすいです。スタイルシートを変更して確認しやすいので。

    トピック投稿者 seta181030

    (@seta181030)

    ご連絡が遅くなりまして申し訳ありません。
    現在ローカルで制作をしておりますので、動作確認が出来るページを提示することが出来ません。
    wordpressをまだ使い始めたばかりで、同じ症状を再現したページはどのように作ったら良いのでしょうか?

    サイト全体に設定されているCSS等の影響を受けている場合がある場合など

    ご教示頂けますと助かります。よろしくお願いします。

    CG

    (@du-bist-der-lenz)

    セレクタの中でも、tableはテーマの全体のレイアウトに相応しい値がテーマのスタイルシートに入れられているケースが多いです。プラグインの中には、独自のスタイルシートを持っているものがあり、上書きします。現在のスタイルシートに間違いがないことが大前提ですが、クラスをつけて独立させてはどうでしょう。ローカルで別テーマを使って確認する、フリーで仕えるサーバーで再現する、課題になっているページだけを知り合いのサイトで掲載してもらう、など、再現したページの公開は方法はいくらでもあります。

    トピック投稿者 seta181030

    (@seta181030)

    他の方法で出来るようになりました。
    ありがとうございました。

    CG

    (@du-bist-der-lenz)

    結果だけでは、わたしも関心があったことだし。『他の方法』がどういうものか解説しておくことは、フォーラムトピックの結論としては好ましいです。

    トピック投稿者 seta181030

    (@seta181030)

    失礼しました。下記の方法を掲載しているサイトがありましたのでそれを利用させてもらいました。

    <div style=”overflow: auto;”>
    <table style=”width: 730px;”>
    <tbody>
    <tr>
    <th></th>
    <th>プランA</th>
    <th>プランB</th>
    </tr>
    <tr>
    <td>価格</td>
    <td>10000000000000000000000000000000000000000000000000円</td>
    <td>20000000000000000000000000000000000000000000000000円</td>
    </tr>
    </tbody>
    </table>
    </div>

    トピック投稿者 seta181030

    (@seta181030)

    上記方法で解決しました。ありがとうございました。

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • トピック「はみ出したtableを横スクロール」には新たに返信することはできません。