テーブルをスクロールさせる方法(html、css)見出し固定版もあり!

web作成

スマホは画面幅が狭いので、<table>タグを使うと潰れてしまって見難くなってしまいます。
この問題を解決するには、一定の画面幅以下の場合にテーブル(表組)をスクロール出来るようにするのが手っ取り早いです。

縦スクロール、縦スクロール(見出し固定)と、横スクロール、 横スクロール(見出し固定)の4パターンを紹介します。どれも画面幅に合わせるレスポンシブ対応済みです!

※縦横どちらにもスクロールできるテーブルは使い勝手が悪いので掲載していません。
※cssのリセットも含んでいます。リセットが出来ている環境の場合は不要なスタイルがありますので状況に応じて削除してください。

① 縦スクロールできるテーブル

テーブルを縦にスクロールさせる方法です。
タグに入れる文字数にもよりますが、スマホ画面を想定すると3カラムが限界ですね。4カラム以上になりそうなら表組自体の構成を考え直した方がいいかもです。
また、記載する内容が数字だけの場合で表が長い場合にユーザーは「これは何の数字だっけ?」となる可能性があります。

サンプル

果物野菜価格
リンゴトマト100
みかんキュウリ200
ももキャベツ300
スイカ人参400
オレンジ大根500
ぶどうレタス600

HTML

<div class="vertical-scroll-table">
 <table>
  <thead>
   <tr><th>果物</th><th>野菜</th><th>価格</th></tr>
  </thead>
  <tbody>
   <tr><td>リンゴ</td><td>トマト</td><td>100</td></tr>
   <tr><td>みかん</td><td>キュウリ</td><td>200</td></tr>
   <tr><td>もも</td><td>キャベツ</td><td>300</td></tr>
   <tr><td>スイカ</td><td>人参</td><td>400</td></tr>
   <tr><td>オレンジ</td><td>大根</td><td>500</td></tr>
   <tr><td>ぶどう</td><td>レタス</td><td>600</td></tr>
  <tbody>
</table>
</div>

css

.vertical-scroll-table{
	color: #5e5e5e;
    max-height: 120px;
	overflow: auto;
	overflow-x: hidden;
}
.vertical-scroll-table table{
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}
.vertical-scroll-table table thead tr{
	font-weight: bold;
	text-align: center;
	background-color: #f3f4f5;
}
.vertical-scroll-table table tbody tr:nth-child(even){
	background-color: #fafbfc;
}
.vertical-scroll-table table td{
	width: 33%;
	padding: 5px;
	border: 1px solid #ddd;
}

※縦にスクロールさせるには高さを指定する必要があります。このソースを使う場合は状況に応じて「height」の値を調整して下さい。
「width: 33%;」は100%割る3カラムの値です。2カラムにする場合は「width: 50%;」、4カラムにする場合は「width: 25%;」に変更して下さい。

② 縦スクロールできるテーブル(見出し固定)

先ほどの①にclassを追加すると、見出し(<th>タグ)を固定します。

横にスクロールできるテーブル

サンプル

見出し あああ いいい ううう えええ
見出し かかか ききき くくく えええ
見出し いいい ううう えええ えええ
見出し いいい ううう えええ えええ

HTML

<div class="side-scroll-table">
 <table>
  <tr>
   <th>見出し</th>
   <td>あああ</td>
   <td>いいい</td>
   <td>ううう</td>
   <td>えええ</td>
  </tr>
  <tr>
   <th>見出し</th>
   <td>かかか</td>
   <td>ききき</td>
   <td>くくく</td>
   <td>えええ</td>
  </tr>
  <tr>
   <th>見出し</th>
   <td>いいい</td>
   <td>ううう</td>
   <td>えええ</td>
   <td>えええ</td>
  </tr>
  <tr>
   <th>見出し</th>
   <td>いいい</td>
   <td>ううう</td>
   <td>えええ</td>
   <td>えええ</td>
  </tr>
 </table>
</div>

CSS

.side-scroll-table{
	overflow: auto;
	overflow-y: hidden;
}
.side-scroll-table table{
	border-collapse: collapse;
	border-spacing: 0;
	color: #5e5e5e;
	width: 100%;
	min-width: 800px;
}
.side-scroll-table table tbody tr:nth-child(odd){
	background-color: #fafbfc;
}
.side-scroll-table table th,
.side-scroll-table table td{
	padding: 5px;
	border: 1px solid #ddd;
}
.side-scroll-table table th{
	font-weight: bold;
	text-align: center;
	background-color: #f3f4f5;
}

注記

横にスクロールできるテーブル(見出し固定)

前書き

コンテンツ

コメント