<div class="meal-table">
  <table>
    <tr>
      <th>ジャンル</th>
      <th>メニュー名</th>
      <th>メイン食材</th>
      <th>主な感想</th>
    </tr>
    <tr>
      <td>和食</td>
      <td>肉じゃが</td>
      <td>じゃがいも</td>
      <td>甘辛くて日本の味。ご飯が進む。</td>
    </tr>
    <tr>
      <td>洋食</td>
      <td>ハンバーグ</td>
      <td>ひき肉</td>
      <td>ジューシーで美味しい。毎月食べたい。</td>
    </tr>
    <tr>
      <td>和食</td>
      <td>肉じゃが</td>
      <td>じゃがいも</td>
      <td>甘辛くて日本の味。ご飯が進む。</td>
    </tr>
    <tr>
      <td>洋食</td>
      <td>ハンバーグ</td>
      <td>ひき肉</td>
      <td>ジューシーで美味しい。毎月食べたい。</td>
    </tr>
    <tr>
      <td>和食</td>
      <td>肉じゃが</td>
      <td>じゃがいも</td>
      <td>甘辛くて日本の味。ご飯が進む。</td>
    </tr>
    <tr>
      <td>洋食</td>
      <td>ハンバーグ</td>
      <td>ひき肉</td>
      <td>ジューシーで美味しい。毎月食べたい。</td>
    </tr>
  </table>
</div>
.meal-table{
  overflow: scroll; /* スクロールする */
  white-space: nowrap; /* 自動改行しない */
  width: 350px;
  height: 150px;
  border: 3px solid tomato;
  padding: 5px;
  box-sizing: border-box;
}
table{
  border-collapse: collapse;
  text-align: center;
}
table th, table td{
  border: 1px solid gray;
}
table th{
  padding: 15px 20px;
  color: #fff;
  background: rgb(65, 188, 236);
}
table td{
  padding: 5px 20px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.