JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <table>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
      <th>Col4</th>
      <th>Col5</th>
      <th>Col6</th>
      <th>Col7</th>
      <th>Col8</th>
      <th>Col9</th>
      <th>Col10</th>
    </tr>
    <tr>
      <td><a href="#">The brown fox is mad jumping all over the place for no reason  </a></td>
      <td>The brown fox  </td>
      <td>The brown fox is mad jumping all over the place for no reason </td>
      <td>The brown fox is mad jumping all over the place for no reason </td>
      <td>The brown fox is mad jumping all over the place for no reason </td>
      <td>The brown fox is mad jumping all over the place for no reason </td>
      <td>The brown fox is mad jumping all over the place for no reason </td>
      <td>The brown fox is mad jumping all over the place for no reason </td>
      <td>The brown fox is mad jumping all over the place for no reason </td>
      <td>The brown fox is mad jumping all over the place for no reason </td>
    </tr>
    <tr>
      <td><a href="#">The brown fox is mad jumping all over the place for no reason  </a></td>
      <td>The brown fox  </td>
      <td>The brown fox is mad jumping all over the place for no reason </td>
      <td>The brown fox is mad jumping all over the place for no reason </td>
      <td>The brown fox is mad jumping all over the place for no reason </td>
      <td>The brown fox is mad jumping all over the place for no reason </td>
      <td>The brown fox is mad jumping all over the place for no reason </td>
      <td>The brown fox is mad jumping all over the place for no reason </td>
      <td>The brown fox is mad jumping all over the place for no reason </td>
      <td>The brown fox is mad jumping all over the place for no reason </td>
    </tr>
    <tr>
      <td><a href="#">The brown fox is mad jumping all over the place for no reason  </a></td>
      <td>The brown fox </td>
      <td>The brown fox is mad jumping all over the place for no reason...

CSS

.wrapper {
  overflow-x: scroll;
}

.wrapper table {
  white-space: nowrap;
}

/** Only for demo */
table,
td,
th {
  border-collapse: collapse;
  border: 1px solid #777;
}

th {
  padding: 5px;
  background: #ddd;
}

td {
  padding: 5px 10px;
}