JSFiddle - React, Tailwind, and code Playground

by jorgeluis

HTML

<table>
  <tr><td><h1>
  headline
  </h1></td></tr>
</table>

<div id="container">
  <table id="quarters" cellpadding="0" cellspacing="0" style="position:absolute; width:40px; background-color:#222">
    <thead></thead>
  </table>

    <table cellpadding="0" cellspacing="0" id="results">
    </table>
</div>

CSS

table {
  border:none;
}
thead {
  color: #eee;
}

td {
  padding: 0.5em;
  border: solid 1px #ccc;
}

#container {
  width: 600px; 
  overflow-x:scroll;  
  margin-left:5em; 
  overflow-y:visible;
  padding-bottom:1px;
}
#quarters {
  position: absolute;
}

JavaScript

for(i=0;i<120;i++) {
	$('#quarters thead').append('<tr><td>'+i+'</td></tr>');
  
	$('#results').append('<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td<td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td<td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td<td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td<td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td<td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td<td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td<td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td<td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>');
}