tableのレスポンシブ対応

レスポンシブ対応で困らせるtableですが、これをレスポンシブ対応させる方法を幾つか挙げます。具体的なソースはインスペクタなどで参照してください。
※ブレイクポイント:1000px

項目と内容が対になっているテーブルなら簡単

以下のようなthとtdが対のテーブルは簡単にレスポンシブ化が可能です。

名前	長倉怜二
年齢	24歳
血液型	A型
愛車	ジムニー

タダ単にtable,tbody,tr,th,tdをdisplay:block;にして落としてスタイルを整えているだけです。

thが同行に複数あるテーブルの場合

問題はこのケースです。スマホで快適に見れる列数はせいぜい2列。テーブルに列が3以上あるとスマホの狭い画面ではキツくなり、blockで落としてしまうとワケが分からなくなります。

名前	年齢	血液型	愛車
長倉怜二	24歳	A型	ジムニー
長倉怜二	24歳	A型	ジムニー

そこで

ちょっとソースに細工します。tdの内容をspanで囲っときます。

<table class="default">
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>血液型</th>
    <th>愛車</th>
  </tr>
  <tr>
    <td><span>長倉 怜二</span></td>
    <td><span>24歳</span></td>
    <td><span>A型</span></td>
    <td><span>ジムニー</span></td>
  </tr>
  <tr>
    <td><span>長倉 怜二</span></td>
    <td><span>24歳</span></td>
    <td><span>A型</span></td>
    <td><span>ジムニー</span></td>
  </tr>
</table>

そして、以下のようなスタイルを書きます。

table.default2,
table.default2 tbody {
  width: 100%;
  display: block;
  text-align: left;
}
table.default2 tr {
  width: 100%;
  display: table;
  margin-bottom: 1em;
}
table.default2 tr > th {
  display: none;
}
table.default2 tr > td {
  display: table-row;
  border: none;
}
table.default2 tr > td span {
  display: table-cell;
  padding: 0.5em;
  border: 1px solid #ccc;
  border-left: 0;
}
table.default2 tr > td:before {
  content: '';
  display: table-cell;
  vertical-align: top;
  padding: 0.5em;
  border: 1px solid #ccc;
  background: #f2f2f2;
}
table.default2 tr > td:nth-child(1):before {
  content: '名前';
}
table.default2 tr > td:nth-child(2):before {
  content: '年齢';
}
table.default2 tr > td:nth-child(3):before {
  content: '血液型';
}
table.default2 tr > td:nth-child(4):before {
  content: '愛車';
}