<section class="contentBody">
  <p class="swipeTable__hint">横にスクロールすることができます</p>
  <div class="swipeTable" tabindex="0">
    <table class="swipeTable__table">
      <caption>
        スクロールが可能なテーブル
      </caption>
      <tbody>
        <tr>
          <th>項目1</th>
          <th>項目2</th>
          <th>項目3</th>
          <th>項目4</th>
          <th>項目5</th>
        </tr>
        <tr>
          <td>内容1−1</td>
          <td>内容1−2</td>
          <td>内容1−3</td>
          <td>内容1−4</td>
          <td>内容1−5</td>
        </tr>
        <tr>
          <td>内容2−1</td>
          <td>内容2−2</td>
          <td>内容2−3</td>
          <td>内容2−4</td>
          <td>内容2−5</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
body{
  margin: 0;
  padding: 0;
}
.contentBody{
  padding: 20px;
}
.swipeTable{
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: auto;
}
.swipeTable__table {
  width: 640px;
  margin-bottom: 1rem;
  border-collapse: collapse;
  background-color: #fff;
  margin: 0 auto;
}
.swipeTable__table td,.swipeTable__table th {
  border:1px solid #ccc;
  padding: 20px;
}
.swipeTable__table th {
  border:1px solid #ccc;
  background-color: #eee;
  padding: 20px;
}
.swipeTable__hint{
  display: block;
  text-align: center;
}
@media screen and (min-width: 640px){
  .swipeTable{
    width: 640px;
  }
  .swipeTable__hint{
    display: none;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.