JSFiddle - React, Tailwind, and code Playground

by James Butler

HTML

<div id="tablecontainer">

		<div id="topbar">
			<div class="colname cellwidth1">ABC</div>
			<div class="colname cellwidth2">ABC</div>
			<div class="colname cellwidth3">ABC</div>
			<div class="colname cellwidth4">ABC</div>
		</div>
		<div class="breakline"></div>
		<div id="expandtable">
			<div class="divrow">
				<div class="divcell cellwidth1">&nbsp;</div>
				<div class="divcell cellwidth2">&nbsp;</div>
				<div class="divcell cellwidth3">&nbsp;</div>
				<div class="divcell cellwidth4">&nbsp;</div>
			</div>
			<div class="divrow">
				<div class="divcell cellwidth1">&nbsp;</div>
				<div class="divcell cellwidth2">&nbsp;</div>
				<div class="divcell cellwidth3">&nbsp;</div>
				<div class="divcell cellwidth4">&nbsp;</div>
			</div>
			<div class="divrow">
				<div class="divcell cellwidth1">&nbsp;</div>
				<div class="divcell cellwidth2">&nbsp;</div>
				<div class="divcell cellwidth3">&nbsp;</div>
				<div class="divcell cellwidth4">&nbsp;</div>
			</div>
			<div class="divrow">
				<div class="divcell cellwidth1">&nbsp;</div>
				<div class="divcell cellwidth2">&nbsp;</div>
				<div class="divcell cellwidth3">&nbsp;</div>
				<div class="divcell cellwidth4">&nbsp;</div>
			</div>
			<div class="divrow">
				<div class="divcell cellwidth1">&nbsp;</div>
				<div class="divcell cellwidth2">&nbsp;</div>
				<div class="divcell cellwidth3">&nbsp;</div>
				<div class="divcell cellwidth4">&nbsp;</div>
			</div>
			<div class="divrow">
				<div class="divcell cellwidth1">&nbsp;</div>
				<div class="divcell cellwidth2">&nbsp;</div>
				<div class="divcell cellwidth3">&nbsp;</div>
				<div class="divcell cellwidth4">&nbsp;</div>
			</div>
			<div class="divrow">
				<div class="divcell cellwidth1">&nbsp;</div>
				<div class="divcell cellwidth2">&nbsp;</div>
				<div class="divcell cellwidth3">&nbsp;</div>
				<div class="divcell cellwidth4">&nbsp;</div>
			</div>
			<div class="divrow">
				<div class="divcell cellwidth1">&nbsp;</div>
				<div...

CSS

html, body, #expandtable, #tablecontainer 
	{
		height:100%;
		margin: 0;
		padding: 0;
		border: none;
		overflow-y: hidden;
	}

	#tablecontainer 
	{
		width: 100%;
		margin: 0 auto;
		padding-top: 50px;
		max-width: 900px;
	}

	#expandtable
	{
		margin: 5px 0 0 0px;
		overflow-x: hidden;
		overflow-y: scroll;
		height: 60%;
		border-bottom: 0;
		background-color: #eee;
		margin: 0 auto;
	}

	.breakline { clear:both;}

	.divrow
	{

	}
	
	.divcell { float:left; border: 1px solid #999; box-sizing: border-box; min-height: 30px; }
	.colname { float:left; border: 1px solid #e5e5e5; box-sizing: border-box;}

	.cellwidth1 { width:10%; }
	.cellwidth2 { width:45%; }
	.cellwidth3 { width:35%; }
	.cellwidth4 { width:10%; }