はみ出したtableを横スクロール

スマホ表示ではみ出した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が5年、 11ヶ月前に変更しました。