画面幅からはみだしたテーブルにたいしてのみ横スクロールで表示ができるようにしたいです。

スマホやタブレット表示時に画面からはみ出す恐れのあるテーブルに横スクロールできるようにしたいです。
参考サイトやqiitaを見ながら記述しているのですが、スクロールバーが表示されません。
スクロールバーが表示できてないので、RWDでどう分岐させるか、メディアクエリに頼らず対応するのかも判断がついていません。
スクロールバーは何で表示できていないのか助力をいただけませんか？

html
1<div class="scroll">
2  <table class="m-auto">
3    <thead>
4      <tr>
5        <th>商品名</th>
6        <th>価格</th>
7        <th>決済方法</th>
8        <th>送料</th>
9        <th>公式サイト</th>
10      </tr>
11    </thead>
12    <tbody>
13      <tr>
14        <td>タイトル</td>
15        <td>1111</td>
16        <td>はがき</td>
17        <td>333</td>
18        <td>公式サイト</td>
19      </tr>
20      <tr>
21        <td>タイトル</td>
22        <td>1111</td>
23        <td>はがき</td>
24        <td>333</td>
25        <td>公式サイト</td>
26      </tr>
27      <tr>
28        <td>タイトル</td>
29        <td>1111</td>
30        <td>はがき</td>
31        <td>333</td>
32        <td>公式サイト</td>
33      </tr>
34    </tbody>
35  </table>
36</div>

css
1.scroll {
2  width: 950px;
3  text-align: center;
4  overflow: auto;
5  white-space: nowrap;
6  margin: 60px auto;
7}
8.scroll thead tr th {
9  background: #acf;
10  padding: 4px 0;
11}
12.scroll tbody td {
13  padding: 6px 0;
14}
15.scroll tbody tr:nth-child(odd) {
16  background: #f9f9f9;
17}
18.scroll tbody tr:nth-child(even) {
19  background: #f0fae2;
20}
21
22.scroll::-webkit-scrollbar {
23  height: 10px;
24}
25.scroll::-webkit-scrollbar-track {
26　　background: #000;
27}
28.scroll::-webkit-scrollbar-thumb {
29　　background: #333;
30}
31
32.scroll table {
33  width: 100%;
34}

「はみ出したtableを、左右スクロールありにしてスマホから見やすくする方法。」
「レスポンシブ対応でtableを横スクロールさせる」
などを参考に試行錯誤をしていますが、
全然簡単じゃないです。。。。

yoshinavi

2019/02/12 19:46

「ビューポート設定」はどうなっていますか？

makoto-n

2019/02/13 07:44

yoshinavi

2019/02/13 07:53

レスポンシブを考えるのであれば、関係します。

行動規範の内容に同意します

回答2件

ベストアンサー

「インデント全角空白」の削除、「width設定」の位置を変えてみてはどうですか？

CSS
1.scroll {
2  width: 950px;　/* ← 削除 */
3  text-align: center;
4  overflow: auto;
5  white-space: nowrap;
6  margin: 60px auto;
7}
8
9.scroll::-webkit-scrollbar-track {
10□□background: #000;　/* ← インデント全角空白削除 */
11}
12.scroll::-webkit-scrollbar-thumb {
13□□background: #333; /* ← インデント全角空白削除 */
14}
15
16.scroll table {
17  width: 100%;
18  min-width: 950px; /* ← 追加 */
19}
20