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

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

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


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加

レスポンシブ対応のサイトを制作していると、テーブルの扱いに悩まされることが多いです。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」を指定することでスクロールを実現しています。

スクロール可能であることを示すために、常にスクロールバーを表示しておきたい場合は、以下のCSSも追加します。

.table-scroll::-webkit-scrollbar {
height: 8px; /* スクロールバーの高さ */
}
.table-scroll::-webkit-scrollbar-thumb {
background: #aaa; /* スクロールバーの色 */
}
.table-scroll::-webkit-scrollbar-track {
background: #ccc; /* スクロールバーの背景色 */
}

iOSでスクロールバーが表示されない場合は、.table-scrollに指定されている「-webkit-overflow-scrolling: touch;」を削除すると表示されるようになります。iOSでは”惰性スクロール”と”常時スクロールバー表示”が両立できない様です。

あとがき

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

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

Twitter で
スポンサードリンク

関連記事

コメントを残す

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