JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<h3>No nested divs</h3>
<div id="constrainer2">
  <table>
    <thead>
      <th>foo dsfdfdf dfgdfgdfg fdg</th>
      <th>foo</th>
      <th>foo</th>
      <th>foo</th>
    </thead>
    <tbody>
      <tr>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
      </tr>
      <tr>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
      </tr>
      <tr>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
      </tr>
      <tr>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
      </tr>
      <tr>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
      </tr>
      <tr>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
      </tr>
      <tr>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
      </tr>
      <tr>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
      </tr>
      <tr>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
      </tr>
      <tr>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
      </tr>
      <tr>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
      </tr>
      <tr>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
      </tr>
      <tr>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
      </tr>
      <tr>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
      </tr>
      <tr>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
      </tr>
      <tr>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
      </tr>
      <tr>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
       ...

CSS

.scrolltable {
  overflow-x: scroll;
  height: 100%;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
}

.scrolltable>.header {}

.scrolltable>.body {
  /*noinspection CssInvalidPropertyValue*/
  width: -webkit-fit-content;
  overflow-y: scroll;
  flex: 1;
  -webkit-flex: 1;
}

th,
td {
  min-width: 150px;
}







#constrainer2 {
  width: 700px;
  overflow-x: scroll;
}

#constrainer2 table {
  overflow-y: scroll;
}

#constrainer2 tbody {
  overflow-x: hidden;
  display: block;
  max-height: 200px;
}

#constrainer2 thead {
  display: table-row;
}






table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid gray;
}

th {
  background-color: lightgrey;
  border-width: 1px;
}

td {
  border-width: 1px;
}

tr:first-child td {
  border-top-width: 0;
}

tr:nth-child(even) {
  background-color: #eee;
}