WEB制作会社 株式会社クレアネットの代表ブログ

未分類

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

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

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

自己紹介

好きなことはマラソン、サッカー。よく走り、よく蹴り、よく学び、よく経営する。

勤勉は喜びを生み、信用を生み、そして富を生む。人間の大切な徳。徳である限りこれを積むには不断の努力がいる。

サッカー採用エントリー

固定ページ

RELATED

PAGE TOP