JSFiddle - React, Tailwind, and code Playground

by victorxpp

HTML

<title>Listcode by Year - MP</title>
<div id='container'>
	<div id='wrapper'>
		<table id="theTable"><thead><tr><td>Julian Date</td>
<td>Records</td>
<td>Sales</td>
<td>CPO</td>
<td>2006 Records</td>
<td>2006 Deals</td>
<td>CPO 2006</td>
<td>2007 Records</td>
<td>2007 Deals</td>
<td>CPO 2007</td>
<td>2008 Records</td>
<td>2008 Deals</td>
<td>CPO 2008</td>
<td>2009 Records</td>
<td>2009 Deals</td>
<td>CPO 2009</td>
<td>2010 Records</td>
<td>2010 Deals</td>
<td>CPO 2010</td>
<td>2011 Records</td>
<td>2011 Deals</td>
<td>CPO 2011</td>
<td>2012 Records</td>
<td>2012 Deals</td>
<td>CPO 2012</td>
<td>Notes</td>
</tr></thead>
<tr bgcolor='#FFFFFF'><td>229</td><td>39784</td><td>0</td><td bgcolor='#FF6262'>10,542.76</td><td>0</td><td>0</td><td bgcolor='#FFFFFF'>0.00</td><td>4729</td><td>0</td><td bgcolor='#FF6262'>1,253.19</td><td>16030</td><td>0</td><td bgcolor='#FF6262'>4,247.95</td><td>3031</td><td>0</td><td bgcolor='#FF6262'>803.22</td><td>10143</td><td>0</td><td bgcolor='#FF6262'>2,687.90</td><td>5851</td><td>0</td><td bgcolor='#FF6262'>1,550.52</td><td>0</td><td>0</td><td bgcolor='#FFFFFF'>0.00</td><td> </td></tr>
<tr bgcolor='#D8D8D8'><td>228</td><td>39855</td><td>0</td><td bgcolor='#FF6262'>10,561.58</td><td>0</td><td>0</td><td bgcolor='#D8D8D8'>0.00</td><td>4727</td><td>0</td><td bgcolor='#FF6262'>1,252.66</td><td>665</td><td>0</td><td bgcolor='#A3FF85'>176.23</td><td>5105</td><td>0</td><td bgcolor='#FF6262'>1,352.83</td><td>22438</td><td>0</td><td bgcolor='#FF6262'>5,946.07</td><td>6920</td><td>0</td><td bgcolor='#FF6262'>1,833.80</td><td>0</td><td>0</td><td bgcolor='#D8D8D8'>0.00</td><td> </td></tr>
<tr bgcolor='#FFFFFF'><td>227</td><td>29916</td><td>0</td><td bgcolor='#FF6262'>7,927.74</td><td>0</td><td>0</td><td bgcolor='#FFFFFF'>0.00</td><td>5224</td><td>0</td><td bgcolor='#FF6262'>1,384.36</td><td>1</td><td>0</td><td bgcolor='#A3FF85'>0.27</td><td>8860</td><td>0</td><td bgcolor='#FF6262'>2,347.90</td><td>14816</td><td>0</td><td...

CSS

table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:15px;
background:#eaebec;
border:#ccc 1px solid;
border-radius:3px;
border-collapse:collapse; border-spacing: 0; 
box-shadow: 0 1px 2px #d1d1d1;
    
    display: block;
    overflow: auto;
    max-height: 400px;
    width: 500px;
}

table thead {
    z-index: 1; /* put on top of other rows */
	display: block;
	position: fixed;
    
    /* make sure this header width is same as table */
    max-width: 500px;
    overflow-y: auto; /* use auto so scrollbars only appear if they need to*/
    overflow-x: hidden;
	}
thead tr td {
    background: #eaebec;
	width: 65px;
	min-width: 65px;
}
table tbody {
display: block;
padding-top: 40px;
}
table th {
padding:2px 2px 2px 2px;
border-top:0;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #ededed;
}
table tr {
text-align: center;
}
/* only using !important to override your styles below */
table td {
	margin-left: 0 !important;
    width: 65px !important;
	padding:2px 2px 2px 2px;
	border-top:0;
	border-bottom:1px solid #e0e0e0;
	border-left: 1px solid #e0e0e0;
	
}

table tr:hover td {
background: #F7FE2E;
}
table tr, table td {
width: 65px;
min-width: 65px;
}
#wrapper {
float: left;
width: auto;
/*height: 400px;
overflow-x: scroll;
overflow-y: scroll;*/
}
/* Make Header Sticky */
#header_container { background:#ffffff; height:30px; left:0; position:fixed; width:100%; top:0; }
#header{ line-height:25px; margin:0 auto; width:auto; text-align:center; }
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container {padding: 25px; margin:30px auto; overflow:auto; padding:0 0; width:auto; }
#content{}

.navigation {
width: 100%;
height: 0;
margin-bottom: 0;
border-radius: 1px;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
-khtml-border-radius: 1px;
}

.navigation ul {
        margin: 0;
        text-align: center;
        width: 95%;
 ...

JavaScript

document.getElementById('theTable').addEventListener('scroll', scrollHeader);

function scrollHeader(e){
    
    var table = e.currentTarget,
        thead = table.getElementsByTagName('thead')[0];
    
    thead.scrollLeft = table.scrollLeft;
}