• 見出しとコンテンツを交互に縦表示
• テーブルの縦横を切り替える
• テーブルそのものをスクロール

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

一般的にテーブルは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;を指定して縦並びにします。
それぞれのセルは横幅いっぱいに表示させるため、width:100%;を入れておきましょう。

table td, table th {
  display: block;
  width: 100%;
}

全体の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を指定して横並びにします。

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

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

  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;
}