大きく変化するようなデザインにしないでください、と思うのですがあるんですよねー、たまに。
というわけでここに置いてあります。
640pxよりブラウザサイズが小さくなるとスマホ相当の画面になります。

何が起きているかと言いますと、PCではtheadの見出しセルとtbodyの見出しセルがありマトリックスな感じの表になっています。
それがスマホでは、PCの1行相当にあたる情報が1ブロックとなり、PCではtbodyの見出しセルがブロックの見出しに昇格し、PCのtheadの見出しセルがtbodyの見出しセルになるという感じになっていますね。

さらにcolspanになってる部分がスマホではrowspanのようになっていて鬼畜だなーと思った方もいらっしゃるかもしれません。

他のブログなどのレスポンシブウェブデザインでのテーブルと同じく、メディアクエリを利用してdisplayの値をゴニョゴニョ切りかえておりますが、他の記事ではあまり言及されていない部分ではPC用、スマホ用のコードを書いてdisplay: block;とdisplay: none;を切り分けている所でしょう。
.pcとか.spのclassがソレですね。
同じ内容をPC用、スマホ用書かなきゃいけないのでアレなんですが、一番シンプルで簡単な対応ですね。

例えば、スマホのみ改行を入れたいという場合には、今回の例で言うと<br class="sp">って書けばOKですしいろいろ便利ですねー。

はー。。。

※ただのサンプルなのでwidth属性はスルーしてください。