レスポンシブサイトでテーブルがはみ出てしまう場合にCSSでテーブル部分だけ横スクロールさせる方法

レスポンシブサイトでテーブルがはみ出てしまう場合にCSSでテーブル部分だけ横スクロールさせる方法

スポンサードリンク
レスポンシブサイトでテーブルがはみ出てしまう場合にCSSでテーブル部分だけ横スクロールさせる方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 大量にアクセスを呼び込みザクザク稼げてしまう21世紀最強の無料ツールを発見!!
  • このエントリーをはてなブックマークに追加

レスポンシブ対応のサイトを制作していると、テーブルの扱いに悩まされることが多いです。PCで見た時は問題なくても、スマホで見ると以下のように縦に伸びてしまい、非常に見難くなってしまったという経験はないでしょうか。

見難いテーブル

これを解決するために、CSSを使ってテーブル部分のみを横スクロールさせる方法をご紹介したいと思います。

動きについては、デモページを用意しましたので、ご確認いただければと思います。

デモページを見る

ブラウザの幅を縮めると、横スクロールが出現します。

レスポンシブサイトでテーブルがはみ出てしまう場合に、CSSでテーブル部分だけ横スクロールさせる方法

まずは、テーブルをtable-scrollというクラスで内包します。

HTML
<div class="table-scroll">
<table>
<tr>
<th>項目1</th>
<th>項目2</th>
<th>項目3</th>
<th>項目4</th>
<th>項目5</th>
<th>項目6</th>
<th>項目7</th>
<th>項目8</th>
<th>項目9</th>
<th>項目10</th>
</tr>
<tr>
<td>内容1内容1</td>
<td>内容2内容2</td>
<td>内容3内容3</td>
<td>内容4内容4</td>
<td>内容5内容5</td>
<td>内容6内容6</td>
<td>内容7内容7</td>
<td>内容8内容8</td>
<td>内容9内容9</td>
<td>内容10内容10</td>
</tr>
</table>
</div>

CSS側は以下のように指定しましょう。

CSS
.table-scroll {
width: 100%;
overflow-y: hidden;
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar;
-webkit-overflow-scrolling: touch;
}
table{
border-collapse: collapse;
}
th,td{
border: solid 1px #ccc;
padding: 8px;
white-space: nowrap;
}
th{
background: #aaa;
color: #fff;
}

テーブル内のテキストが折り返さないように「white-space: nowrap;」を指定し、テーブル全体に「-webkit-overflow-scrolling」を指定することでスクロールを実現しています。

あとがき

横スクロールで対処するという方法もあるということで、スマホサイトでのテーブルの扱いに困ったらぜひ参考にしてください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。