JSFiddle - React, Tailwind, and code Playground

by koh_edwin

HTML

<div class="container">

  <div class="scroll-table-container">
    <div class="scroll-table">

      <table>
        <tr>
          <th >table or other arbitrary content</th>
          <th>that will cause your page to stretch</th>
          <th>one more</th>
          <th>one more</th>
        </tr>
        <tr>
          <td width=150>uncontrollably</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxx</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxx</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxx</td>
        </tr>
        <tr>
          <td>uncontrollably</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxx</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxx</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxx</td>
        </tr>
        <tr>
          <td>uncontrollably</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxx</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxx</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxx</td>
        </tr>
        <tr>
          <td>uncontrollably</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxx</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxx</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxx</td>
        </tr>
        <tr>
          <td>uncontrollably</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxx</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxx</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxx</td>
        </tr>
        <tr>
          <td>uncontrollably</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxx</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxx</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxx</td>
        </tr>
        <tr>
          <td>uncontrollably</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxx</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxx</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxx</td>
        </tr>
        <tr>
          <td>uncontrollably</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxx</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxx</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxx</td>
        </tr>
        <tr>
          <td>uncontrollably</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxx</td>
...

CSS

body {
  background-color: #ccc;
}

.container {
  width: 300px;
  background-color: white;
}

table {
  width: 100%;

}

td {
  border: 1px solid black;
}



.scroll-table-container {
border:2px solid green; 
height: 200px; 
overflow: scroll;
}
.scroll-table, td, th {
border:1px solid #777; 
}

.scroll-table {
min-width: 200px;}