JSFiddle - React, Tailwind, and code Playground

by FredM7

HTML

<table>
			<thead>
				<tr>
					<th>
						Head 1
					</th>
					<th>
						Head 2
					</th>
					<th>
						Head 3
					</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td><td>2</td><td>3</td>
				</tr>
				<tr>
					<td>1</td><td>2</td><td>3</td>
				</tr>
				<tr>
					<td>1</td><td>2</td><td>3</td>
				</tr>
				<tr>
					<td>1</td><td>2</td><td>3</td>
				</tr>
				<tr>
					<td>1</td><td>2</td><td>3</td>
				</tr>
				<tr>
					<td>1</td><td>2</td><td>3</td>
				</tr>
				<tr>
					<td>1</td><td>2</td><td>3</td>
				</tr>
				<tr>
					<td>1</td><td>2</td><td>3</td>
				</tr>
				<tr>
					<td>1</td><td>2</td><td>3</td>
				</tr>
				<tr>
					<td>1</td><td>2</td><td>3</td>
				</tr>
			</tbody>
		</table>

CSS

table {
				width: 200px;
				background: green;
			}
			
			table tbody, table thead
			{
				display: block;
			}
			
			table thead 
			{
			   padding-right: 15px;
			}
			
			table tbody 
			{
			   overflow: auto;
			   height: 100px;
			}
			
			thead th {
				width: 72px;
				text-align: left;
			}
			
			tbody td {
				width: 72px;
				text-align: left;
			}