【CSS】テーブルのレスポンシブ処理（スクロール）【レスポンシブ・簡単コピペ】

htmlで組んでいて、レスポンシブ対応を考えた時に結構困るのがテーブル処理じゃないでしょうか？

スマートフォンなどのデバイスではどうしても表組が縦長になり、いい感じで表示しづらい。

さらにはテーブル自体の組み換えをすることになると、意味合いが変わってしまう場合もあったりします。

特にアクセシビリティな面でいうと読み上げなどに影響も出ちゃったり。。。

ま、普段使いの人にとってはなんのこっちゃになるんだと思いますが、そういう微妙な部分での対応もしなきゃならんときがあるとですよｗ

なもんで、テーブルはそのままの形で使いたいなんて場合には、強引にスクロール処理を施す方法なんていうのもあったりします。

今回はそのご紹介をば。

ざっくりと今回のhtmlを書いてみる

少し横に大きいテーブルというイメージでみてくださいね。

こんな感じで組んでみました。

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<meta >
<title>table レスポンシブ</title>
<link rel=”stylesheet” href=””>
</head>
<body>
<h1>table</h1>
<table>
<tr><th>見出し</th><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
</table>
</body>
</html>

※かなり適当はご了承くださいませ

ポイントはビューポートの設定ぐらいかなぁ（これがないとテーブルなどが勝手に縮小されちゃって上手くいかない場合があります、お悩みの方、確認してみてくださいな）。

今回使うのはoverflow-x:scroll;

実はそんなに難しいことはしていないんですよ。

テーブルのサイズを固定にしてあげて、画面横幅（もしくはある一定の大きさ）よりテーブルサイズが大きくなる場合にはオーバーフロー処理をしてあげる

これだけです。

文字で書くとややこしいかもしれませんので、さっそくcssで記述してみると

.outer { width: 100%; overflow-x: scroll;}
table { width: 1000px; }
td, th { border: 1px solid lightgray; }
table th { background-color: #eee; }

こんな感じです。

.outer　はhtmlのtableタグをさらにラップするようにdivなどで囲み、そこにつけたクラス名です。html部分の変更は赤文字部分。

テーブルを囲んでる div class=”outer” という感じです。

他の部分は、テーブル幅を1000px、各セルのラインは1pxでライトグレー、見出し部分の背景を少し濃い灰色という感じですね。

ポイントは

outerが画面サイズの100％
に対して、テーブルが1000pxと固定
画面幅が1000pxより小さくなっている場合は、オーバーフロー（X方向）はスクロール処理

ということです。これだけ。

簡単でしょ？

どんな画面になるかというと…幅500pxぐらいにしてみると

こんな感じにスクロールバーがついてテーブル自体が横にスクロールできるようになります！

まとめ

文字の大きさやテーブル幅など調整してあげる必要はありますが、レスポンシブ対応しなきゃならない場合には、割と手軽な方法じゃないかなと思います。

参考になれば幸いです。

最後に今回のコードを全部載せておくので、コピペで試してみてくださいね♪

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta >
 <title>table レスポンシブ</title>
 <link rel="stylesheet" href="">
 <style>
 .outer { width: 100%; overflow-x: scroll;}
 table { width: 1000px; }
 td, th { border: 1px solid lightgray; }
 table th { background-color: #eee; }
 </style>
</head>
<body>
 <h1>table</h1>
<div class="outer">
 <table>
 <tr><th>見出し</th><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
 </table>
</div>
</body>
</html>