JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <table>
    <thead>
      <tr>
        <th>Title 1</th>
        <th>Name</th>
        <th>Address</th>
        <th>Col4</th>
        <th>Col5</th>
        <th>Col6</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Title 2</td>
        <td>Jane Doe</td>
        <td>dfss</td>
        <td>sdffsffsfd</td>
        <td>sfsfs</td>
        <td>sfsff</td>
      </tr>
      <tr>
        <td>Title 3</td>
        <td>John Doe</td>
        <td>sasas</td>
        <td>eeeee</td>
        <td>eEe</td>
        <td>sfff</td>
      </tr>
      <tr>
        <td>Title 4 is a long title</td>
        <td>Name1</td>
        <td>dfss</td>
        <td>sdffsffsfd</td>
        <td>sfsfs</td>
        <td>sfsff</td>
      </tr>
      <tr>
        <td>Title 5 is shorter</td>
        <td>Name 2</td>
        <td>dfsf</td>
        <td>sdfsf</td>
        <td>dfsf</td>
        <td>sdfsf</td>
      </tr>
      <tr>
        <td>Title 6</td>
        <td>Name 3</td>
        <td>sasas</td>
        <td>eeeee</td>
        <td>eEe</td>
        <td>sfff</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

th,
td {
  text-align: left;
  padding: 5px;
  outline: solid 0.5px;
}

table {
  table-layout: auto;
  width: 100%;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: scroll;
  height: 100px;
  display: block;
}

.container {
  width: 300px;
}