iscle [イズクル] - あなたの生活に役立つネタを!
Facebook twitter YouTube Feedly Feed

スマホ表示でテーブルがはみ出さないようにCSSで横スクロールさせる

竹中文人
執筆者:
[最終更新日]2018/06/22
[カテゴリ]Web・IT

スマホ表示でテーブルがはみ出さないように CSSだけで横スクロールさせる方法

Web サイトをスマートフォンに対応させていても、テーブル(表)が縦に伸びて綺麗に表示されなかったり、横にはみ出してしまって全てが見えない状態であったりしていませんか?パソコンで観る分には問題なくても、画面サイズが小さいスマホだとテーブルが崩れるなど思ったように表示されないことはよくあります。

表がはみ出す

パソコンで表示させた時のようにテーブルをそのまま綺麗に表示させたいのであれば、画面からはみ出してしまう部分は横スクロールができ観覧ができるようにしてあげましょう。このページでは CSS だけでテーブルだけ横スクロールしてはみ出さないようにするコードをご紹介いたします。

スポンサーリンク

テーブルだけ横スクロールできるようにするCSS

まず下記の例のように table タグを x-scroll というクラスで挟んであげてください。

<div class="x-scroll">
<table>
<tbody>
<tr>
<th scope="row">&nbsp;</th>
<td>エコノミー </td>
<td>スタンダード</td>
<td>プロ</td>
<td>プロ+α</td>
</tr>
<tr>
<th scope="row">サイト数</th>
<td>1</td>
<td>5</td>
<td>10</td>
<td>11~</td>
</tr>
<tr>
<th scope="row">広告表示</th>
<td>あり</td>
<td>なし</td>
<td>なし</td>
<td>なし</td>
</tr>
<tr>
<th scope="row">サポート</th>
<td>なし</td>
<td>なし</td>
<td>あり</td>
<td>あり</td>
</tr>
<tr>
<th scope="row">価格</th>
<td>月額100円</td>
<td>月額1,000円</td>
<td>月額2,000円</td>
<td>要相談</td>
</tr>
</tbody>
</table>
</div>

そして次の CSS を追加します。

.x-scroll {
overflow: auto;
}
.x-scroll table{
width:100%;
}
.x-scroll::-webkit-scrollbar{
height: 5px; /* スクロールバーの高さ */
}
.x-scroll::-webkit-scrollbar-track{
background: #F1F1F1; /* スクロールバーの背景色 */
}
.x-scroll::-webkit-scrollbar-thumb {
background: #d6d6d6; /* スクロールバーの色 */
}
.x-scroll td, .x-scroll th{
white-space: nowrap; /* 文字の折返しを禁止 */
}

実際に適用したテーブルがこちらです。スマホで見てみると、横向きのスクロールバーが表示されて横スクロールができてテーブルが全て観ることができますね。

 エコノミースタンダードプロプロ+α
サイト数151011~
広告表示ありなしなしなし
サポートなしなしありあり
価格月額100円月額1,000円月額2,000円要相談

ポイントとしては「overflow: auto;」を追加することでテーブルがスクロールするようになります。また「white-space: nowrap;」を追加することで、セル内で文字が折り返してしまわないように指定しています。細かいテーブルの色などの装飾はご自身で行ってみてください。

ちなみに、シンプルな表などは横スクロールさせずにテーブルを縦並びにするのがお勧めです。

関連記事(一部広告含む)