”レスポンシブテーブル”の作成方法

<table class="rps_table">
    <tr>
    <th style="min-width:160px;">見出しセル</th>
    <td>データセル</td>
    </tr>
    <tr>
    <th style="min-width:160px;">見出しセル</th>
    <td>データセル</td>
    </tr>
    </table>

.rps_table {
  line-height: 2.0;
}
th {
  font-weight: 400;
  background-color: #ececec;
}
table td, table th {
  border: 1px solid rgba(0,0,0,.2) !important;
}
ul {
  list-style-type: none;
  padding: 0;
}
@media only screen and (min-width: 568px) {
  th {
    font-weight: 400;
    background-color: #ececec;
    width: 25%;
  }
}
@media only screen and (max-width: 567px) {
  .rps_table tr {
    display: block;
    margin-bottom: 1.5em;
  }
  .rps_table th,.rps_table td {
    display: list-item;
    list-style-type: none;
  }
  .rps_table td {
    border-top: none;
  }
}