CodePen Embed - レスポンシブ　block

<table>
  <caption>業務内容</caption>
  <tr>
    <th>日付</th>
    <td>2021/6/1</td>
    <td>2021/6/2</td>
  </tr>
  <tr>
    <th>業務内容</th>
    <td>コーディング</td>
    <td>デザイン</td>
  </tr>
  <tr>
    <th>詳細</th>
    <td>〇〇社のTOPページを作成</td>
    <td>〇〇社からの修正があったため、その対応</td>
  </tr>
</table>

table{
  width: 100%;
  border-collapse:collapse;
  text-align: center;
  font-size: 13px;
}
caption{
  font-weight: 600;
}
td ,th{
  border: solid 1px #000;
}
th {
  background: #000;
  color: #fff;
  border-bottom: solid 1px #fff;
}
th:m{
  background: #000;
  color: #fff;
  border-bottom: solid 1px #fff;
}

@media screen and (max-width: 640px) {
  table {
    width: 90%;
    margin: 0 auto;
  }
   th, td {
    display: block;
  }
  th{
    border-bottom: solid 1px #000;
  }
  td{
    border-top: solid 1px #fff;
  }
}

This Pen is owned by adatype on CodePen.

See more by @adatype on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.