表をスマホ表示で横スクロールできるようにしたいです


  • 表を入れた時にセルの文章が長いため『スマホでは表を横にスクロール』するようにしたいのですが、
    参考サイト(https://helppo-station.com/html-table-scroll)をみてやってみたところ、スマホ画面でスクロールの表示が出ませんでした。

    WordPressのバージョン :
    ご利用のサーバー名 :
    PHPのバージョン :
    OS :
    ご利用のブラウザ :
    該当サイトのURL :

    0

  • こんにちは！

    お使いの表にもよりますが、「シンプルな表」と表示されるものであれば以下のCSSで対処できるかと思います。

    /* 表の内容を横スクロールできるようにする */
@media (max-width: 767px) {
.cps-table03 td{
max-width:150px;
overflow-x:scroll;
white-space: nowrap;
}
}
    0

  • 表をスマホ表示で横スクロールできるようにしたいですで@ななうみが発言 :

    https://helppo-station.com/html-table-scroll

    ひつじさんご本人から早々にご回答いただけるなんて(>_<)
    お忙しい中、ありがとうございます！！！

    今、追加CSSに入れてみたのですが
    「シンプルな表」の2列目のみスクロール可能でした。

    3列以上の表をスクロールさせたいのでワードプレスの「テーブル」ボタンから表を作ったのですが
    そちらはスクロール出来ませんでした。
    対応方法ございますでしょうか？

    度々恐れ入りますが、ご回答いただけましたら幸いでございます。
    どうぞよろしくお願いいたします。

    0 1 件の返信

  • @ななうみ

    今、追加CSSに入れてみたのですが
    「シンプルな表」の2列目のみスクロール可能でした。

    「シンプルな表」で3列以上もスクロールはしてたんですが、そもそも表示がキツくなってしまいますよね。。

    こういった高度な表を作りたい場合は、「TablePress」のプラグインをお使いいただくのが一番かと。
    以下の記事を参考にすれば水平スクロールに対応したレスポンシブな表も作成できます。
    http://netbiz-life.com/archives/5695

    ご確認をよろしくお願いいたします。

    0

  • ひつじさん
    度々のお返事ありがとうございます！
    「TablePress」のプラグインの事を教えてくださり、ありがとうございます！
    参考記事を元に設定したのですが、私のやり方に間違いか不足があったのか、水平スクロールが出てきませんでした(>_<)

    代わりに、ＪＩＮ使用中で水平スクロールが出来るという方が見つかり、下記コードを教えてくれました。
    設定してみたところ、無事に水平スクロールが表示されたため、こちらで共有させていただきます。

    【HTMLに記述してる内容】
    <div class="scroll-table">
    テーブルタグ
    </div>

    【追加CSSに記載してる内容】

    .scroll-table {
    overflow: auto;
    white-space: nowrap;
    }

    .scroll-table::-webkit-scrollbar {
    height: 5px;
    }
    .scroll-table::-webkit-scrollbar-track {
    border-radius: 5px;
    background: #f0f0f0;
    }
    .scroll-table::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #f0f0f0;
    }

    ありがとうございました！

    2