tableをレスポンシブにする最小のCSS

よくあるこんなテーブル

ソースはシンプルに

<html lang="ja">
<head>
<title>responsiv test</title>
<style>
th,td
{
 border-top: 1px solid #000;
 border-bottom: 1px solid #000;
}
th
{
  color: #fff;
    background-color: #666666;
}

</style>


</head>
<body>

<table>
<tr><thead><td>商品</td><td>説明</td></thead></tr>
<tr></tr>
<tr><th>sampe1</th><td>マジ高いけど効果はあるかもしれませんがあくまで個人の主観によりますのでご注意ください</td></tr>
<tr><th>sampe2</th><td>値段相応の効果はあるかもしれませんがあくまで個人の主観によりますのでご注意ください</td></tr>
<tr><th>sampe3</th><td>効果があればラッキーかもしれませんがあくまで個人の主観によりますのでご注意ください</td></tr>
</table>

</body>
</html>

ありがちなテーブルです。
これをレスポンシブな感じにするにはCSSにちょっと付け足すとレスポンシブというヤツになります。（厳密には違うかもしれないけど）

@media(max-width: 480px)
{
   thead
   {
       display: none;
  }
   th,td
   {
       display: block;
 }
}

CSSにこれを付け足します。
するとブラウザーの横幅が480pxより小さくなるとこんな感じになります。

これはmediaというものを使ってブラウザーの表示領域の横幅が480pxを境に機能する
CSSを指定しています。

480pxより小さくなった場合に以下の機能が発動します

thとtdをブロック要素として扱う
theadを見えなくしてしまう

そうすることで横幅が狭くなっても見易くするようになっています。
ちなみにこのmediaクエリーIE8などは対応してませんが、WIndowsXP以下でしか無いのでそう気にする必要もないでしょう。
IE8以下でもmediaクエリーに対応したい場合はcss3-mediaqueries.jsというJavaScriptのライブラリを読み込むことで対応が可能ですが、これは@importが使えないなど条件があるので注意が必要です。

実際にはtableで組む場合ももっと複雑な場合やCSSが入り乱れている場合もありますが、レスポンシブというのがどのような仕組みかを理解するにはこれくらいシンプルなほうがいいかと思って書いてみました。

HTML 　