JSFiddle - React, Tailwind, and code Playground

by Yevheniy Potupa

HTML

<div>
  <h2>Another div here</h2>
</div>
<div class="container">
  <div class="wrapper">
    <table>
      <thead>
        <tr>
          <th>One</th>
          <th>Two</th>
          <th>Three</th>
          <th>Four</th>
          <th>Five</th>
        </tr>
      </thead>
      <tbody>
        <tr>
            <td>AAAAAA</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
        </tr>
        <tr>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
        </tr>
        <tr>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
        </tr>
        <tr>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
        </tr>
        <tr>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
        </tr>
        <tr>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
        </tr>
        <tr>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
        </tr>
        <tr>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
        </tr>
      </tbody>
    </table>
    <table>
      <thead>
        <tr>
         ...

CSS

.container {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 200px;
  width: 80%;
}
.wrapper {
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
}
html {
    font-family: verdana;
    font-size: 10pt;
    line-height: 25px;
}
table {
    border-collapse: collapse;
}
thead {
    background-color: #EFEFEF;    
}
thead tr {
  position: sticky;
}
thead, tbody {
    display: block;
}
td, th {
    min-width: 50px;
    height: 25px;
    border: dashed 1px lightblue;
    overflow-x: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}