デザイン・レイアウト

はみ出したtableを、左右スクロールありにしてスマホから見やすくする方法。【HTML/CSS】

スマホから見たとき、tableを左右にスクロールさせたい時って結構あるので、備忘録を兼ねて記録しておきます。

完成形

よくあるこういう表を、左右にぐりぐりとスクロール出来るようにします。(スマホから見てみてください)



料金容量備考
プランA500円7GBまで/月超過時は速度制限あり。翌月まで128kbpsに制限されます。
プランB1,000円15GBまで/月超過時は速度制限あり。翌月まで128kbpsに制限されます。
プランC3,000円容量無制限速度制限なし

HTML

スクロールありにしたいtableタグを、scrollというclassを付与したdivタグで囲います。


<div class="scroll">
<table>
<tbody>
<tr><th></th><th>料金</th><th>容量</th><th>備考</th></tr>
<tr><th>プランA</th><td>500円</td><td>7GBまで/月</td><td>超過時は速度制限あり。翌月まで128kbpsに制限されます。</td></tr>
<tr><th>プランB</th><td>1,000円</td><td>15GBまで/月</td><td>超過時は速度制限あり。翌月まで128kbpsに制限されます。</td></tr>
<tr><th>プランC</th><td>3,000円</td><td>容量無制限</td><td>速度制限なし</td></tr>
</tbody>
</table>
</div>

CSS

クラスscrollを付与したdivタグで、tableをスクロール可能にし、さらにtable内の折り返しを禁止します。

スクロールバーを表示させる指定もここでしてあげます。


<style type="text/css">
.scroll{
/* tableをスクロール可能にする */
overflow: auto;
/* tableセル内文字の折り返しを禁止 */
white-space: nowrap;
}

/* ↓tableにスクロールバーを追加 ここから */
.scroll::-webkit-scrollbar{
height: 5px;
}
.scroll::-webkit-scrollbar-track{
/* スクロールバーのスクロール範囲の色 */
background: #F6F6F6;
}
.scroll::-webkit-scrollbar-thumb {
/* スクロールバーのツマミの色 */
background: #C2C2C2;
}
/* tableにスクロールバーを追加 ここまで↑ */

.scroll table{
/* tableの幅を100%に */
width:100%;
}
</style>

出来上がり!簡単ですよね

スマホから横に長いtableを見たときの可読性がとってもよくなります。

お試しあれ。