スマホでテーブルを表示した際に、縦に間延びしたり横にはみ出て見えなくなったりすることを防ぐ。テーブルが画面外にはみ出して横スクロールで見れるようにする。

[HTML]
横スクロールさせたいtableの前後をdivで挟みクラスを指定する（例）<div class=”tableScroll>

<div class="tableScroll">
     <table>
              <tr>
                <th>都道府県名</th>
                <th>2014</th>
                <th>2015</th>
                <th>2016</th>
                <th>2017</th>
                <th>2018</th>
                <th>2019</th>
              </tr>
              <tr>
                <td>東京都</td>
                <td align="right">20</td>
                <td align="right">32</td>
                <td align="right">45</td>
                <td align="right">70</td>
                <td align="right">112</td>
                <td align="right">85</td>
              </tr>
     </table>
</div>

CSSに以下を記述する

.tableScroll{
overflow:auto;　/* テーブルをスクロールさせる */
}
.tableScroll{
width:100%;
}
.tableScroll::-webkit-scrollbar{
height: 5px; /* スクロールバーの高さ */
}
.tableScroll::-webkit-scrollbar-track{
background: #F1F1F1; /* スクロールバーの背景色 */
}
.tableScroll::-webkit-scrollbar-thumb {
background: #d6d6d6; /* スクロールバーの色 */
}
.tableScroll td, .tableScroll th{
white-space: nowrap; /* 文字の折返しを禁止 */
}