レスポンシブWebサイトでの、テーブル組みコーディングにはいろんな手法があります

下記、Design Spiceさんのブログでは、かっこよくて、ユーザービリティも良好なテーブル組みの方法が掲載されています。
レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice

うん、すばらしい！
これでよくね？

当記事ではもう少し単純な方法を紹介します。

当記事では、上記の手法よりも、見た目は劣るけれど、もっと簡単に実装できる方法を紹介します。

具体的には

具体的に説明すると、テーブル自体は、PCとスマホでスタイルを変えることはせず、小さい画面の場合に、あふれてしまった分のテーブルを横スクロールさせることで、表示させるというものです。

レスポンシブテーブルサンプル

地味でユーザービリティも少し劣るかもしれませんが、とにかく簡単に組める。
これがこの手法の最大のメリットです。

ミソは、テーブルをoverflow-x: auto;にしたdivで囲うこと

では、早速コードを紹介します。

<div id="wrapper">
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr>
        <td>あ</td>
        <td>い</td>
        <td>う</td>
    </tr>
</table>
</div>

//CSS 重要な箇所を抽出

#wrapper{
    width: 100%;
    overflow-x: auto;
}
table{
    width: 600px;//ここは適当な大きさで
}

table全体をdivで囲っているのがわかります。
さらに、このdivにスタイルをつけていきます。
具体的には、
overflow:auto;
と
width:100%

あとは、レイアウトに応じてメディアクエリを用いて、画面サイズが小さくなった時だけ、動作するように、といった調整をすれば、もう完成。