JSFiddle - React, Tailwind, and code Playground

by cataclysm_404

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

			table {
			  width: 100%;
			  text-align: center;
			  border-collapse: collapse;
			}
			table tr th {
			  border: 1px solid green;
			}
			table tr th:first-child {
			  border-left: 1px solid green;
			}
			table tr td {
			  border: 1px solid green;
			}

			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 green;
				display: block;
				top : 1px;
			}

			th::after {
				content: '';
				position: absolute;
				left: 0;
				width: 100%;
				height: 100%;
				border-bottom: 1px solid green;
				border-top: 1px solid green;
				display: block;
				top : -1px;
			}