table2列複数行タイプをレスポンシブで1列にする方法

tableのレスポンシブ対応をする際に、忘れていたので( ..)φメモしておきます。
いろんなパターンが考えられますが、ここでは2列複数行タイプのtableをレスポンシブ対応で1列（複数行）にする方法を書いておきます。

簡単にHTML構造を書いておきます↓例として2列３行の表のパターンにしておきます。

<table>
    <tr>
        <th></th>
        <td></td>
    </tr>
    <tr>
        <th></th>
        <td></td>
    </tr>
    <tr>
        <th></th>
        <td></td>
    </tr>
</table>

PC対応の場合は、レスポンシブに対応するように<th><td>にそれぞれwidthを％で設定します。

スマホ対応になってくると画面幅が狭いので、これを全て1列で表現するとした時

tr,
th,
td {
    display: block;
    width: 1000%;
}

で表現できます。

ただし、各セルや見出しにボーダーを指定していた場合は、ボーダーの調整が必要になってきます。