<section class="contentBody">
  <div class="responsiveTable">
    <table class="responsiveTable__table">
      <caption>
        レスポンシブ対応のテーブル
      </caption>
      <thead>
        <tr>
          <th>項目1</th>
          <th>項目2</th>
          <th>項目3</th>
          <th>項目4</th>
          <th>項目5</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-label="項目1">内容1−1</td>
          <td data-label="項目2">内容1−2</td>
          <td data-label="項目3">内容1−3</td>
          <td data-label="項目4">内容1−4</td>
          <td data-label="項目5">内容1−5</td>
        </tr>
        <tr>
          <td data-label="項目1">内容2−1</td>
          <td data-label="項目2">内容2−2</td>
          <td data-label="項目3">内容2−3</td>
          <td data-label="項目4">内容2−4</td>
          <td data-label="項目5">内容2−5</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
body{
  margin: 0;
  padding: 0;
}
.contentBody{
  padding: 20px;
}
.responsiveTable{
  width: 100%;
  margin: 0 auto;
}

.responsiveTable__table {
  border-collapse: collapse;
  width: 100%;
}
.responsiveTable__table th,
.responsiveTable__table td{
  padding: 10px;
  border: solid 1px #ccc;
  text-align:center;
  box-sizing:border-box;
}
.responsiveTable__table th {
  background: #eee;
}
@media screen and (max-width: 640px) {
  .responsiveTable__table thead{
    display:none;
  }
  .responsiveTable__table {
    width: 100%;
  }
  .responsiveTable__table td {
    display: block;
    width: 100%;
    border-bottom:none;
  }
  .responsiveTable__table td:first-child{
    background: #ccc;
    font-weight:bold;
  }
  .responsiveTable__table td:before{
    content: attr(data-label);
    font-size: .7rem;
    font-weight:bold;
    color: #777;
    display: block;
  }
  .responsiveTable__table tr:last-child{
    border-bottom: solid 1px #ccc;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.