JSFiddle - React, Tailwind, and code Playground

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: 1px solid red;
}

table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #edecec;
}

th::before {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	border-right: 1px solid red;
	display: block;
	top : 1px;
}