JSFiddle - React, Tailwind, and code Playground

HTML

blah some text<br /> blah
<table>
	<thead>
		<tr>
			<th>Code</th>
        	<th>Rank</th>
    		<th>Code</th>
        	<th>Icon</th>
    		<th>Message Text</th>
    		<th>Progress</th>
    		<th>Current</th>
    		<th>X</th>
    		<th>Y</th>
    		<th>Z</th>
    		<th>W</th>
    		<th>Result</th>
  		</tr>
    </thead>
    <tbody>
  		<tr class="data-row" id="19">
			<td class="center">DDD</td> <!-- 4 alpha numeric -->
			<td class="center">111</td>	<!-- 3 digits -->
			<td class="center">222</td>	<!-- 3 digits -->
			<td class="center">
				<img width="20" height="20" src="http://cdn1.iconfinder.com/data/icons/CrystalClear/128x128/apps/ark2.png"> <!-- icon -->
			</td>
			<td>Lorem ipsum</td> <!-- text may be long -->
			<td class="center">333</td><!-- 3 alpha numeric -->
			<td class="center">444</td><!-- 3 alpha numeric -->
			<td class="center">555</td><!-- 3 alpha numeric -->
			<td class="center">666</td><!-- 3 alpha numeric -->
			<td class="center">777</td><!-- 3 alpha numeric -->
			<td class="center">888</td><!-- 3 alpha numeric -->
			<td class="center">999</td><!-- 3 alpha numeric -->
		</tr>
              		<tr class="data-row" id="19">
			<td class="center">DDD</td> <!-- 4 alpha numeric -->
			<td class="center">111</td>	<!-- 3 digits -->
			<td class="center">222</td>	<!-- 3 digits -->
			<td class="center">
				<img width="20" height="20" src="http://cdn1.iconfinder.com/data/icons/CrystalClear/128x128/apps/ark2.png"> <!-- icon -->
		</td>
			<td>Lorem ipsum</td> <!-- text may be long -->
			<td class="center">333</td><!-- 3 alpha numeric -->
			<td class="center">444</td><!-- 3 alpha numeric -->
			<td class="center">555</td><!-- 3 alpha numeric -->
			<td class="center">666</td><!-- 3 alpha numeric -->
			<td class="center">777</td><!-- 3 alpha numeric -->
			<td class="center">888</td><!-- 3 alpha numeric -->
			<td class="center">999</td><!-- 3 alpha numeric -->
		</tr>
                          		<tr class="data-row" id="19">
			<td...

CSS

table {
    width: 100%;
    border-collapse: collapse;
    position:relative;
}
.center{
    text-align: center;
}
tr th:nth-child(1), tr td:nth-child(1) { background-color: orange;}
tr th:nth-child(2), tr td:nth-child(2) { background-color: lightblue;}
tr th:nth-child(3), tr td:nth-child(3) { background-color: orange;}
tr th:nth-child(4), tr td:nth-child(4) { background-color: lightblue;}
tr th:nth-child(5), tr td:nth-child(5) { background-color: orange;}
tr th:nth-child(6), tr td:nth-child(6) { background-color: lightblue;}
tr th:nth-child(7), tr td:nth-child(7) { background-color: orange;}
tr th:nth-child(8), tr td:nth-child(8) { background-color: lightblue;}
tr th:nth-child(9), tr td:nth-child(9) { background-color: orange;}
tr th:nth-child(10), tr td:nth-child(10) { background-color: lightblue;}
tr th:nth-child(11), tr td:nth-child(11) { background-color: orange;}
tr th:nth-child(12), tr td:nth-child(12) { background-color: lightblue;}

JavaScript

var tableBaseTop;
var originalHeader;
var floatingHeader;

$(document).ready(function () {
    tableBaseTop = $('table th').offset().top;
    originalHeader = $('thead');
    floatingHeader = originalHeader.clone();
    floatingHeader
        .css('position', 'absolute')
        .css('top', 0);
    
    setFloatingHeaderSize();
    
    $('table').prepend(floatingHeader);
    
    $(window).scroll(function () {
        var windowTop = $(window).scrollTop();
        
        if (windowTop > tableBaseTop)
            floatingHeader.css('top', windowTop - tableBaseTop);
        else
            floatingHeader.css('top', 0);
    });
    
    $(window).resize(setFloatingHeaderSize);
});

function setFloatingHeaderSize() {
    var originalThs = originalHeader.find('th');
    var floatingThs = floatingHeader.find('th');
    for (var i = 0; i < originalThs.length; i++) {
        floatingThs.eq(i)
            .css('width', originalThs.eq(i).width())
            .css('height', originalThs.eq(i).height());
    }
}