テーブルをレスポンシブデザインに対応するためのCSSを使ったレイアウトパターン


レスポンシブデザインをしていると悩まされるんがテーブルのデザインです。
PCの画面と違って表示領域が狭いので、工夫しないとうまくテーブルを表示できません。
CSSを使ってテーブルをレスポンシブデザインするためのパターンを紹介します。

レスポンシブでレイアウトを変更する

一般的にテーブルはTableタグを使っているでしょう。
その構成要素は、Tableはdisplay:tableが初期値で、tdやthタグはtable-cellが初期値になっています。
これらを操作することで、レスポンシブに対応します。

横に並んだカラムを縦にする

最もシンプルで一般的なスタイル。
会社概要とかに使われているような、左側に見出しがあって右側にその内容が書かれているような場合。

table {
  border-collapse: collapse;
}
table td, table th {
  padding: 10px;
}
table th {
  background-color: #eee;
}

ウィンドウが小さくなった時は、縦に並べることで狭い幅でも読みやすいレイアウトにすることができます。
テーブルレイアウトのレスポンシブ対応これはむちゃくちゃ簡単。
テーブルのtd, thにdisplay:block;を指定するだけ。

抜粋
table td, table th {
  display: block;
}

全体のCSSとしてはこんな感じ。

全体
table {
  border-collapse: collapse;
}
table td, table th {
  display: block;
  padding: 10px;
}
table th {
  background-color: #eee;
}

このレイアウトは、問い合わせなどのページでも使えますよ。
問い合わせページのレスポンシブ対応

横に並んだカラムを縦にする

料金表やプランの案内など、横に長く並ぶようなテーブルの場合はスマホでははみ出てしまいます。
同じような並びであれば、縦にしたってかまわないので、横のテーブルを縦にしてみましょう。
テーブルの縦横を回転させる

<table>
  <thead>
    <tr><th>見出し</th><th>見出し</th><th>見出し</th><th>見出し</th><th>見出し</th><th>見出し</th><th>見出し</th><th>見出し</th></tr>
  </thead>
  <tbody>
    <tr><td>〇</td><td>〇</td><td>〇</td><td>〇</td><td>〇</td><td>〇</td><td>〇</td><td>〇</td></tr>
    <tr><td>〇</td><td>〇</td><td>〇</td><td>〇</td><td>〇</td><td>〇</td><td>〇</td><td>〇</td></tr>
    <tr><td>〇</td><td>〇</td><td>〇</td><td>〇</td><td>〇</td><td>〇</td><td>〇</td><td>〇</td></tr>
  </tbody>
</table>
table {
  border-collapse: collapse;
}
table td, table th {
  padding: 10px;
  text-align: center;
}
table th {
  background-color: #eee;
}

縦横を反転させるというとちょっと複雑に思えますが、考え方は簡単。
theadとtbodyが縦に並んでいるのを、floatで横に並べます。
テーブルと縦横開店させる
この大枠さえつかめていれば、コードはそんなに難しくないでしょう。

抜粋
  table thead {
    display: block;
    float: left;
    width: 30%;
  }
  table tbody {
    display: block;
    float: left;
    width: 70%;
  }

tbody内のtrは縦に並んでいたものを横にしないといけないので、display:block;とfloat:leftを指定して横並びにします。
レスポンシブテーブルのtrの指定

抜粋
  table tr {
    display: block;
    float: left;
  }
  table thead tr {
    width: 100%;
  }
  table tbody tr {
    width: 30%;
  }

さらにその中のthやtdは縦並びになるので、一番初めに紹介したテクニックを使うためにdisplay:block;を指定します。
ちょっとややこしいのですが、縦列に変更する方法では横列の高さが連動しません。
なので、tdやthに固定の高さを設定してレイアウトの崩れを防いでいます。
テーブルのレスポンシブレイアウトのtdの指定

抜粋
  table tr td, table tr th {
    display: block;
    height: 40px;
  }

全体としてはこのようなCSSになります。

全体
@media only screen and (max-width: 800px) {
  table {
    width: 100%;
  }
  table tr {
    display: block;
    float: left;
  }
  table tr td, table tr th {
    display: block;
    height: 40px;
  }
  table thead {
    display: block;
    float: left;
    width: 30%;
  }
  table thead tr {
    width: 100%;
  }
  table tbody {
    display: block;
    float: left;
    width: 70%;
  }
  table tbody tr {
    width: 30%;
  }
}

スタイルを変更せず単純にスクロールを利用する方法

テーブルそのものをスクロール

レスポンシブデザインというとウィンドウサイズによってレイアウトを変更しないといけない気になりますが、
テービルはその縦横の情報っていうのも非常に重要だったりするのでむやみに変えない方がいいこともあります。
特に横長のテーブルは横スクロールを使うという方法もあります。
テーブル
こういったテーブルをレイアウトを変えずにスマホで見えるようにしたい場合は、このようにスクロールさせます。
スクロールテーブル
スクロールさせるために、テーブル自体をdivなどの要素で囲みます。
外枠のdiv自体はウィンドウのサイズで可変になるものとして、テーブル要素は固定値(例だとwidth:1000px;)で幅をとります。
外枠のdivにoverflow-x:scroll;を入れるとこのようになります。
テーブルとスクロール

<div class="outer">
  <table>
    <thead><th>見出し</th><th>見出し</th><th>見出し</th><th>見出し</th><th>見出し</th><th>見出し</th><th>見出し</th><th>見出し</th><th>見出し</th><th>見出し</th></thead>
    <tbody>
      <tr>
        <td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td>
      </tr>
      <tr>
        <td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td>
      </tr>
      <tr>
        <td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td>
      </tr>
      <tr>
        <td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td>
      </tr>
      <tr>
        <td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td><td>コンテンツ</td>
      </tr>
    </tbody>
  </table>
</div>
.outer {
  width: 100%;
}

table {
  border-collapse: collapse;
  width: 1000px;
}
table td, table th {
  border: 1px solid #ccc;
  padding: 10px;
}
table th {
  background-color: #eee;
}

以上、3つのパターンを紹介しました。
細かい部分では様々対応が必要になるかもしれませんが、大きくはこれらのパターンを知っているといいですよ。
他にもjQueryやbox指定を使った方法もあるので、機会があれば紹介します。

一緒に読もう、関連記事