スマホから見たとき、tableを左右にスクロールさせたい時って結構あるので、備忘録を兼ねて記録しておきます。
目次
完成形
よくあるこういう表を、左右にぐりぐりとスクロール出来るようにします。（スマホから見てみてください）
料金 容量 備考 プランA 500円 7GBまで/月 超過時は速度制限あり。翌月まで128kbpsに制限されます。 プランB 1,000円 15GBまで/月 超過時は速度制限あり。翌月まで128kbpsに制限されます。 プランC 3,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を見たときの可読性がとってもよくなります。
お試しあれ。
