JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="container">
  <table>
    <tr>
      <td>dfsf</td>
      <td>dfsf</td>
      <td>dfsf</td>
      <td>dfsf</td>
      <td>dfsf</td>
      <td>dfsf</td>
      <td>dfsf</td>
    </tr>
    <tr>
      <td>dfsf</td>
      <td>dfsf</td>
      <td>dfsf</td>
      <td>dfsf</td>
      <td>dfsf</td>
      <td>dfsf</td>
      <td>dfsf</td>
    </tr>
    <tr>
      <td>dfsf</td>
      <td>dfsf</td>
      <td>dfsf</td>
      <td>dfsf</td>
      <td>dfsf</td>
      <td>dfsf</td>
      <td>dfsf</td>
    </tr>
    <tr>
      <td>dfsf</td>
      <td>dfsf</td>
      <td>dfsf</td>
      <td>dfsf</td>
      <td>dfsf</td>
      <td>dfsf</td>
      <td>dfsf</td>
    </tr>
  </table>
</div>

CSS

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #8f54a0 #ffffff;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #ffffff;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #8f54a0;
    border-radius: 10px;
    border: 3px solid #ffffff;
  }

.container {
  width: 300px;
  position: relative;
  overflow: hidden;
  overflow-x: auto;
  white-space: pre;
  padding: 0 20px;
  outline: 1px solid #000;
}
.container::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 1px;
}
.container table {
  width: 800px;
  border: 1px solid red;
}