「コピペ可・究極方法」あらゆる画面サイズに！CSSだけでレスポンシブテーブルを作る

PC対応・スマホ対応・タブレット対応・レスポンシブが当たり前になってきてるこの時代、

table（テーブル）はPCへの対応がなんとかできたら、スマホの画面が崩れてしまう。あ～もう限界～～！

様々な対応方法、やり方がありますが

今回はもっともシンプルで簡単に、そして実用的な賢い実装レスポンシブだけを紹介します。

まずは、各端末の表示画面を確認しておきましょう

PCの表示画像

スマホの表示画像

実際の表示画面

テーブルのタテ列がどれだけ多くても平気！ヾ(｡>﹏<｡)ﾉﾞ✧*。

レスポンシブ対応のソースコードを見てみましょう

<table>
<thead>
<tr>
<th>タイトル1</th>
<th>タイトル2</th>
<th>タイトル3</th>
<th>タイトル4</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="支払い">支払い #1</td>
<td data-label="日付">02/01/2019</td>
<td data-label="金額">￥2,311</td>
<td data-label="次回">01/01/2019 - 01/31/2019</td>
</tr>
<tr>
<td data-label="支払い">支払い #2</td>
<td data-label="日付">03/01/2019</td>
<td data-label="金額">￥3,211</td>
<td data-label="次回">02/01/2019 - 02/28/2019</td>
</tr>
</tbody>
</table>

table {
    border: 1px solid #ccc;
    width: 80%;
    margin:0;
    padding:0;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 auto;
  }

  table tr {
    border: 1px solid #ddd;
    padding: 5px;
  }

  table th, table td {
    padding: 10px;
    text-align: center;
  }

  table th {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
  }

  @media screen and (max-width: 600px) {

    table {
      border: 0;
    }

    table thead {
      display: none;
    }

    table tr {
      margin-bottom: 10px;
      display: block;
      border-bottom: 2px solid #ddd;
    }

    table td {
      display: block;
      text-align: right;
      font-size: 13px;
      border-bottom: 1px dotted #ccc;
    }

    table td:last-child {
      border-bottom: 0;
    }

    table td:before {
      content: attr(data-label);
      float: left;
      text-transform: uppercase;
      font-weight: bold;
    }
  }

600px以下のスクリーン（スマホなど）では、積み重なって表示されます。

以上があらゆる画面サイズに！CSSだけでテーブルをレスポンシプ対応させる方法でした。