JSFiddle - React, Tailwind, and code Playground

by Nhat Pham

HTML

<div id="wrapper">
			<table>
				<thead>
					<tr>
						<th>A</th>
						<th>B</th>
						<th>C</th>
						<th>D</th>
						<th>E</th>
					</tr>
				</thead>
					<tr>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
					</tr>
					<tr>
						<td>2</td>
						<td>2</td>
						<td>2</td>
						<td>2</td>
						<td>2</td>
					</tr>
					<tr>
						<td>3</td>
						<td>3</td>
						<td>3</td>
						<td>3</td>
						<td>3</td>
					</tr>
					<tr>
						<td>4</td>
						<td>4</td>
						<td>4</td>
						<td>4</td>
						<td>4</td>
					</tr>
					<tr>
						<td>5</td>
						<td>5</td>
						<td>5</td>
						<td>5</td>
						<td>5</td>
					</tr>
					<tr>
						<td>6</td>
						<td>6</td>
						<td>6</td>
						<td>6</td>
						<td>6</td>
					</tr>
					<tr>
						<td>7</td>
						<td>7</td>
						<td>7</td>
						<td>7</td>
						<td>7</td>
					</tr>
					<tr>
						<td>8</td>
						<td>8</td>
						<td>8</td>
						<td>8</td>
						<td>8</td>
					</tr>	
					<tr>
						<td>9</td>
						<td>9</td>
						<td>9</td>
						<td>9</td>
						<td>9</td>
					</tr>				
				<tbody>
				</tbody>
			</table>
		</div>

CSS

#wrapper {
				width : 400px;
				height : 200px;
				overflow : auto;
			}
			table {
				width : 100%;
				text-align : center;
				border-collapse : collapse;
			}
			table tr th, table tr td {
				border : 2px solid;
			}
			table thead th{
				position: -webkit-sticky;
				position : sticky;
				top : 0;
				background-color : #edecec;
			}