Wordpress スマホテーブル横スクロールの設定

Question

前提・実現したいこと

PC環境でもテーブル（表）をスクロースさせたい

Wordpressでサイトを運営しています。
適用テーマはTHE THORです。

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

現在、ワードプレスのスマホテーブル横スクロールを使って
表を作成しており、SP環境では問題なく表を横にスクロールできておりますが
PCだとスクロールどころか途中で見切れてしまいます。

CSSは下記のみ、子テーマに設定しております。

/テーブルの横スクロールのためのCSSはここから/
table{
width:100%;
}
.scroll{
overflow: auto;
white-space:nowrap;
}
.scroll::-webkit-scrollbar{
height: 15px;
}
.scroll::-webkit-scrollbar-track{
background: #f1f1f1;
}
.scroll::-webkit-scrollbar-thumb{
background: #bbb;
}
/テーブルの横スクロールのためのCSSはここまで/

試したこと
スマホテーブル横スクロールを使わずにCSSとHTMLの記述で
表をレスポンシブにしようとしたが、SPが崩れてしまい断念しました。

私自信、初心者なのでどなたか解決方法を教えて下さい。

Answer 1

HTMLがないので想像になりますが、以下のように<table>の親要素にclass="scroll"を指定する必要があると思われます。

<div class="scroll">
  <table>
    <tr>
      <td>ああああああああああああ</td>
      <td>いいいいいいいいいいいい</td>
      <td>うううううううううううう</td>
      <td>ええええええええええええ</td>
      <td>おおおおおおおおおおおお</td>
    </tr>
  </table>
</div>

---

試したこと
スマホテーブル横スクロールを使わずにCSSとHTMLの記述で
表をレスポンシブにしようとしたが、SPが崩れてしまい断念しました。

上記について、縦並びにする想定の場合、一部のタグ、例えば<table>や<td>だけにdisplay: block;してもうまくいきません。

table関連のタグをすべてdisplay: block;にするところが第一歩目です。

table,
thead,
tbody,
tfoot,
tr,
th,
td {
  display: block;
  width: auto; /* widthを指定している場合 */
}