JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="page-wrap">
	<table class="table table-hover persist-area">
		<thead>
			<tr class="persist-header">
				<th></th>
				<th style="text-align:right"></th>
				<th style="text-align:right">one</th>
				<th style="text-align:right">two</th>
				<th style="text-align:right">three</th>
				<th style="text-align:right">four</th>
				<th style="text-align:right">five</th>
				<th style="text-align:right">six</th>
				<th style="text-align:right">seven</th>         
			</tr>
		</thead>
        <tbody>
			<tr>
				<td>
				</td>
				<td style="text-align:right;">
				</td>
				<td style="text-align:right">
				</td>
				<td style="text-align:right">
				</td>
				<td style="text-align:right">
                    blublu
				</td>
				<td style="text-align:right">
				</td>
				<td style="text-align:right">
				</td>
				<td style="text-align:right">
				</td>
				<td style="text-align:right">
				</td>
			</tr>
		</tbody>
    </table>
</div>

CSS

*	{ 
	margin: 0; 
	padding: 0; 
}
h1 {
	margin: 0 0 20px 0;
}
p {
	margin: 0 0 20px 0;
}
#page-wrap { 
	margin: 50px auto;
}
table {
	border-collapse: collapse;
}
th { 
	width: 200px;
}

/*this one is the replacement for scrolling*/
.floatingHeader {
		position: fixed;
		top: 40px;
		visibility: hidden;
		background-color: #fff;
		border-bottom: 2px solid #E4205C;
}

JavaScript

function UpdateTableHeaders() {
	$(".persist-area").each(function() {
       
		var el         = $(this),
		offset         = el.offset(),
		scrollTop      = $(window).scrollTop(),
		floatingHeader = $(".floatingHeader", this)
           
		if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
			floatingHeader.css({
				"visibility": "visible"
			});
		} else {
			floatingHeader.css({
				"visibility": "hidden"
			});      
		};
	});
}
    
// DOM Ready      
$(function() {
    
	var clonedHeaderRow;
    
	$(".persist-area").each(function() {
		clonedHeaderRow = $(".persist-header", this);
		clonedHeaderRow
		.before(clonedHeaderRow.clone())
		.css("width", clonedHeaderRow.width())
		.addClass("floatingHeader");
             
	});
       
	$(window)
	.scroll(UpdateTableHeaders)
	.trigger("scroll");
       
});