JSFiddle - React, Tailwind, and code Playground

by Julesezaar

HTML

<table class="myTable">
  <thead>
    <tr>
      <td>Problem</td>
      <td>Solution</td>
      <td>blah</td>
      <td>derp</td>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
<p>
  Some text here
</p>

CSS

table {
  background-color: #aaa;
  width: 100%;
}

thead,
tbody {
  display: block;
}

tbody {
  background-color: #ddd;
  height: 150px;
  overflow-y: scroll;
}

tbody tr.hidden-to-set-col-widths,
tbody tr.hidden-to-set-col-widths td {
  visibility: hidden;
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

td {
  padding: 3px 10px;
}

JavaScript

$(function() {
	$('.myTable thead > tr').clone().appendTo('.myTable tbody').addClass('hidden-to-set-col-widths');

  for (var i = 0; i < 20; i++) {
    var a = Math.floor(10 * Math.random());
    var b = Math.floor(10 * Math.random());
    var row = $("<tr>").append($("<td>").html(a + " + " + b + " ="))
      .append($("<td>").html(a + b))
      .append($("<td>").html('blah'))
      .append($("<td>").html('derp'));
    $("tbody").append(row);
  }
});