テーブルレスポンシブデザイン（縦積み）

見出し01(th)	内容（コンテンツ）	内容（コンテンツ）	内容（コンテンツ）
見出し01(th)	内容（コンテンツ）	内容（コンテンツ）	内容（コンテンツ）
見出し01(th)	内容（コンテンツ）	内容（コンテンツ）	内容（コンテンツ）

↑↑イメージ図↑↑

<table class=""tbl-r02"">
  <tr>
    <th>見出し01(th)</th>
    <td>内容（コンテンツ）</td>
    <td>内容（コンテンツ）</td>
    <td>内容（コンテンツ）</td>
  </tr>
  <tr>
    <th>見出し01(th)</th>
    <td>内容（コンテンツ）</td>
    <td>内容（コンテンツ）</td>
    <td>内容（コンテンツ）</td>
  </tr>
  <tr class=""last"">
    <th>見出し01(th)</th>
    <td>内容（コンテンツ）</td>
    <td>内容（コンテンツ）</td>
    <td>内容（コンテンツ）</td>
  </tr>
</table>

p {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 60px auto 40px;
}
table {
  margin: 20px auto;
}
.tbl-r02 th {
  background: #e9727e;
  border: solid 1px #ccc;
  color: #fff;
  padding: 10px;
}
.tbl-r02 td {
　border: solid 1px #ccc;
  padding: 10px;
}

@media screen and (max-width: 640px) {
  .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }
  .tbl-r02 {
    width: 80%;
  }
  .tbl-r02 th,
  .tbl-r02 td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }
}