Tableをスマホで見たときに、横スクロールで表示する方法

写真は特に深い意味はありませんが、HTMLで作ったTableをスマホで見たときに、横スクロールで表示する方法をご紹介します。
普段作っているTableに少しだけ手を加えるだけで、誰でも簡単に横スクロール機能をつけることができるのでとてもおススメです！

①まずは横幅100％の設定にしたTableタグで表を作る

まずは普段通りにHTMLでTableを作っていきます。この時の注意点として、Tableの幅は100％の設定にしておきます。

<table width="100%">
 <tr> 
  <td>朝ごはん</td>
  <td>おにぎりとおみそしる</td>
 </tr>
 <tr>
  <td>昼ごはん</td>
  <td>とんかつ定食</td> 
 </tr>
</table>

②作ったTableをclassタグで囲む

作ったTableに対して、＜div class=”sp-scroll-table”＞～～＜/div＞で囲ってあげる。HTML側での準備はこれだけです！簡単！！！

<div class="sp-scroll-table">
<table width="100%">
 <tr> 
  <td>朝ごはん</td>
  <td>おにぎりとおみそしる</td>
 </tr>
 <tr>
  <td>昼ごはん</td>
  <td>とんかつ定食</td>
 </tr>
</table>
</div>

③以下のCSSをコピーしてCSSファイルに張り付ける

以下のCSSをコピーして、CSSファイルに張り付けてください！これだけです！！
このCSSは、横幅480pxになると適応するように書かれています。すでにスマホ用のCSSを作っていて、【@media (max-width: ●●px) 】の記述を行っている場合は、【@media (max-width: ●●px) 】の部分はコピーしなくて大丈夫です！

@media (max-width: 480px) {
.sp-scroll-table table{
border-collapse: collapse;
margin: 2em 0;
max-width: 100%;
}
.sp-scroll-table th{
background-color: #009BBF ;
　text-align: center;
　color: #FFFFFF ;
padding: 1em;
}
.sp-scroll-table td{
border: solid 1px #ccc ;
padding: 1em;
white-space: nowrap;
}
.sp-scroll-table {
overflow-x: auto;
margin-bottom: 1em;
max-width: 770px;
}
}

このやり方で、Tableをスマホで表示したときに、横スクロール機能をつけることができます！