<table>
  <thead>

    <tr>
      <th>Date</th>
      <th>Coffee name</th>
      <th>Coffee roaster</th>
      <th>Method</th>
      <th>Time of brewing</th>
      <th>Rating</th>
    </tr>
    <tr>
      <th class="border" colspan="6"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2022-07-01</td>
      <td>Salwador Los Angeles</td>
      <td>HAYB</td>
      <td>V60</td>
      <td>2:30</td>
      <td>6/10</td>
    </tr>
    <tr>
      <td>2022-07-02</td>
      <td>Salwador Los Angeles</td>
      <td>HAYB</td>
      <td>Areopress</td>
      <td>1:00</td>
      <td>7/10</td>
    </tr>
    <tr>
      <td>2022-07-03</td>
      <td>Salwador Los Angeles</td>
      <td>HAYB</td>
      <td>Clever Dripper</td>
      <td>2:00</td>
      <td>8/10</td>
    </tr>
    <tr>
      <td>2022-07-04</td>
      <td>Salwador Los Angeles</td>
      <td>HAYB</td>
      <td>Chemex</td>
      <td>5:00</td>
      <td>9/10</td>
    </tr>
    <tr>
      <td>2022-07-05</td>
      <td>Sumatra Pantan Musara</td>
      <td>Karma</td>
      <td>V60</td>
      <td>2:00</td>
      <td>9/10</td>
    </tr>
    <tr>
      <td>2022-07-05</td>
      <td>Sumatra Pantan Musara</td>
      <td>Karma</td>
      <td>V60</td>
      <td>2:00</td>
      <td>9/10</td>
    </tr>
    <tr>
      <td>2022-07-05</td>
      <td>Sumatra Pantan Musara</td>
      <td>Karma</td>
      <td>V60</td>
      <td>2:00</td>
      <td>9/10</td>
    </tr>
    <tr>
      <td>2022-07-05</td>
      <td>Sumatra Pantan Musara</td>
      <td>Karma</td>
      <td>V60</td>
      <td>2:00</td>
      <td>9/10</td>
    </tr>
    <tr>
      <td>2022-07-05</td>
      <td>Sumatra Pantan Musara</td>
      <td>Karma</td>
      <td>V60</td>
      <td>2:00</td>
      <td>9/10</td>
    </tr>
    <tr>
      <td>2022-07-05</td>
      <td>Sumatra Pantan Musara</td>
      <td>Karma</td>
      <td>V60</td>
      <td>2:00</td>
      <td>9/10</td>
    </tr>
    <tr>
      <td>2022-07-05</td>
      <td>Sumatra Pantan Musara</td>
      <td>Karma</td>
      <td>V60</td>
      <td>2:00</td>
      <td>9/10</td>
    </tr>
    <tr>
      <td>2022-07-05</td>
      <td>Sumatra Pantan Musara</td>
      <td>Karma</td>
      <td>V60</td>
      <td>2:00</td>
      <td>9/10</td>
    </tr>
    <tr>
      <td>2022-07-05</td>
      <td>Sumatra Pantan Musara</td>
      <td>Karma</td>
      <td>V60</td>
      <td>2:00</td>
      <td>9/10</td>
    </tr>
    <tr>
      <td>2022-07-05</td>
      <td>Sumatra Pantan Musara</td>
      <td>Karma</td>
      <td>V60</td>
      <td>2:00</td>
      <td>9/10</td>
    </tr>
    <tr>
      <td>2022-07-05</td>
      <td>Sumatra Pantan Musara</td>
      <td>Karma</td>
      <td>V60</td>
      <td>2:00</td>
      <td>9/10</td>
    </tr>
    <tr>
      <td>2022-07-05</td>
      <td>Sumatra Pantan Musara</td>
      <td>Karma</td>
      <td>V60</td>
      <td>2:00</td>
      <td>9/10</td>
    </tr>
    <tr>
      <td>2022-07-05</td>
      <td>Sumatra Pantan Musara</td>
      <td>Karma</td>
      <td>V60</td>
      <td>2:00</td>
      <td>9/10</td>
    </tr>
  </tbody>
</table>

body {
  font-family: system-ui, sans-serif;
  padding: 1rem;
}

table {
  width: 100%;
  height: 240px;
  margin: 0 auto;
  display: block;
  overflow-x: auto;
}

tbody {
  white-space: nowrap;
}

th,
td {
  padding: 1rem;
}

thead {
  position: sticky;
  top: 0;
  background: white;
  text-align: left;
}

.border {
  height: 1px;
  padding: 0;
  background-color: black;
}