スマホの時にtableをスクロールさせる
<div class="scroll">
<table>
<tr>
<td>テキストテキスト</td>
<td>テキストテキストテキスト</td>
</tr>
<tr>
<td>テキストテキスト</td>
<td>テキストテキストテキスト</td>
</tr>
</table>
</div>
.scroll {
overflow-x: auto;
padding-bottom: 10px;
-webkit-overflow-scrolling: touch;
}
/*スクロールバー全体の高さ*/
.scroll::-webkit-scrollbar {
height: 4px;
}
/*スクロールバー全体の背景*/
.scroll::-webkit-scrollbar-track {
background: #eee;
}
/*スクロールバーの動く部分*/
.scroll::-webkit-scrollbar-thumb {
background: #aaa;
border: none;
}
/*スクロールバーの動く部分のホバー(マウスオーバー)*/
.scroll::-webkit-scrollbar-thumb:hover {
background: #999;
}
.scroll table {
width: 100%;
min-width: 590px;
letter-spacing: 0;
}
コメント