JSFiddle - React, Tailwind, and code Playground

by InsaneCoder

HTML

<div id="outer_box">
	<table  id="sheet_table" cellspacing="0">
		<tr><th class="fixed_first">S.No</th><th class="fixed_other">Supplier Title</th><th>My Title</th><th>Length</th><th>Supplier</th></tr>
	</table>
	</div>

CSS

#sheet_table{
			border:1px solid #9E9E9E;
			margin-top:100px;
			margin-left:20px;
		}
		table{
			width:100%;
			background-color:#fff;
		}
		table td,th{
			border: 1px solid #9E9E9E;
			padding:10px 20px 10px 20px;
		}
		.fixed_first{
			position:absolute;
			overflow: visible;
			left:0;
		}
		.fixed_other{
			position:absolute;
			overflow: visible;
			float:left;			
		}
		#outer_box{
			overflow-x:scroll;
			overflow-y:visible;	
			width:500px;	
		}