JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table-scroll">
  <table>
    <tr>
      <td>Some really really really really really really really long content.</td>
      <td>Some really really really really really really really long content.</td>
      <td>Some really really really really really really really long content.</td>
    </tr>
    <tr>
      <td>Some really really really really really really really long content.</td>
      <td>Some really really really really really really really long content.</td>
      <td>Some really really really really really really really long content.</td>
    </tr>
    <tr>
      <td>Some really really really really really really really long content.</td>
      <td>Some really really really really really really really long content.</td>
      <td>Some really really really really really really really long content.</td>
    </tr>
  </table>
</div>

CSS

.table-scroll {
  margin-bottom: 0;
  overflow: hidden;
  overflow-x: scroll;
  display: block;
  white-space: nowrap;
  border: 1px solid #CCC;
}
.table-scroll table {
  margin-bottom: -4px;
}
tr:nth-child(even) td {
  background: white;
}
td {
   padding: 5px;
}
.table-scroll::-webkit-scrollbar {
  height: 5px;
}
.table-scroll::-webkit-scrollbar-thumb {
  background: rgba(180, 180, 180, 0.7);
  border-radius: 2px;
  border-bottom: 1px solid white;
}