スマートフォンの場合、横スクロールいたします

・横幅100%の設定にしたTableタグで表を作る
・<div class=”sp-scroll-table”>~~</div>
・CSS設定

@media (max-width: 480px) {
.sp-scroll-table table{
border-collapse: collapse;
margin: 2em 0;
max-width: 100%;
}
.sp-scroll-table th{

 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をスマホで見たときに、横スクロールで表示する方法

関連しているブログ記事一覧