JSFiddle - React, Tailwind, and code Playground

by timmah

HTML

<table>
	<tr>
		<td class="first">Fixed position cell</td>
		<td>scrolling cellscrolling cellscrolling cellscrolling cellscrolling cellscrolling cellscrolling cellscrolling cellscrolling cellscrolling cellscrolling cellscrolling cellscrolling cellscrolling cellscrolling cellscrolling cellscrolling cellscrolling cellscrolling cellscrolling cellscrolling cellscrolling cellscrolling cellscrolling cellscrolling cellscrolling cellscrolling cellscrolling cellscrolling cell</td>
	</tr>
	<tr>
		<td class="first">Fixed position cell</td>
		<td>scrolling cell</td>
	</tr>
	<tr>
		<td class="first">Fixed position cell</td>
		<td>scrolling cell</td>
	</tr>
	<tr>
		<td class="first">Fixed position cell</td>
		<td>scrolling cell</td>
	</tr>
	<tr>
		<td class="first">Fixed position cell</td>
		<td>scrolling cell</td>
	</tr>
	<tr>
		<td class="first">Fixed position cell</td>
		<td>scrolling cell</td>
	</tr>
    	<tr>
		<td class="first">Fixed position cell</td>
		<td>scrolling cell</td>
	</tr>
    	<tr>
		<td class="first">Fixed position cell</td>
		<td>scrolling cell</td>
	</tr>
    	<tr>
		<td class="first">Fixed position cell</td>
		<td>scrolling cell</td>
	</tr>
    	<tr>
		<td class="first">Fixed position cell</td>
		<td>scrolling cell</td>
	</tr>
    	<tr>
		<td class="first">Fixed position cell</td>
		<td>scrolling cell</td>
	</tr>
    	<tr>
		<td class="first">Fixed position cell</td>
		<td>scrolling cell</td>
	</tr>
    	<tr>
		<td class="first">Fixed position cell</td>
		<td>scrolling cell</td>
	</tr>
    	<tr>
		<td class="first">Fixed position cell</td>
		<td>scrolling cell</td>
	</tr>
	<tr>
		<td class="first">Fixed position cell</td>
		<td>scrolling cell</td>
	</tr>
</table>

CSS

* {
    margin:0;
    padding:0;
    border:0;
}
table {
    width:100%;
    height:auto;
    overflow-x:scroll;
}
td {
    display:block;
    width:1000px;
    height:71px;
    border:solid 1px #333;
    vertical-align:top;
}

td.first {
    position:fixed;
    width: 100px;
    height: 100%;
    background:#ccc;
}
td:irst:nth-child(2n) {
    background:#DDD;
}
td:nth-child(2n) {
    padding-left:110px;
    background-color:#eaeaea;
}

JavaScript

$(window).scroll(function() {
 var scrollTop = $(window).offset();
    $('td.first').css('top', '-' + scrollTop + 'px')
})