Author : MD TAREQ HASSAN | Updated : 2020/09/23

CSS

site.css

div.fixed-head-table-wrapper {
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: auto;
}

div.fixed-head-table-wrapper thead {
	position: sticky;
	top: 0;
}

table {
    display: flex;
    flex-flow: column;
    width: 100%;
}

thead {
    flex: 0 0 auto;
}

tbody {
    flex: 1 1 auto;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
}

.table td {
    padding-bottom: .1em;
    padding-right: 0;
    padding-left: 0;
    padding-top: 0;
}

.table th {
    padding-left: 0;
}

tr {
    width: 100%;
    display: table;
    table-layout: fixed;
}

thead tr {
    border: 0;
}

Table markup

<!doctype html>
<html lang="en">
  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha512-MoRNloxbStBcD8z3M/2BmnT+rg4IsMxPkXaGh2zD6LGNNFE80W3onsAhRcMAMrSoyWL9xD7Ert0men7vR8LUZg==" crossorigin="anonymous" />
    <link rel="stylesheet" href="./site.css">
	
    <title>Scrollable table with fixed header</title>
	
  </head>
  <body>

	<div class="container">
	
		<h1>Scrollable table with fixed header</h1>
		
			<div class="fixed-head-table-wrapper">
		
				<table class="table">
				
					<thead class="bg-primary text-white">
						<tr>
							<th>AA</th>
							<th>BB</th>
							<th>CC</th>
							<th>DD</th>
							<th>EE</th>
							<th>FF</th>
							<th colspan="2"></th>
						</tr>
					</thead>
					
					<tbody>

						<tr data-id="">
							<td data-toggle="tooltip" data-container="body" data-placement="top" title="">aaa111</td>
							<td data-toggle="tooltip" data-container="body" data-placement="top" title="">bbb111</td>
							<td data-toggle="tooltip" data-container="body" data-placement="top" title="">ccc111</td>
							<td>ddd111</td>
							<td>eee111</td>
							<td>fff111</td>
							<td class="text-right">
								<button class="btn btn-secondary" @onclick="@( (e) => NavigationManager.NavigateTo($"/items/edit/{item.Id}") )">
									Edit
								</button>
							</td>
							<td class="text-right">
								<button class="btn btn-secondary" @onclick="@( (e) => NavigationManager.NavigateTo($"/items/delete/{item.Id}") )">
									Delete
								</button>
							</td>
						</tr>
						
						<tr data-id="">
							<td data-toggle="tooltip" data-container="body" data-placement="top" title="">aaa111</td>
							<td data-toggle="tooltip" data-container="body" data-placement="top" title="">bbb111</td>
							<td data-toggle="tooltip" data-container="body" data-placement="top" title="">ccc111</td>
							<td>ddd111</td>
							<td>eee111</td>
							<td>fff111</td>
							<td class="text-right">
								<button class="btn btn-secondary" @onclick="@( (e) => NavigationManager.NavigateTo($"/items/edit/{item.Id}") )">
									Edit
								</button>
							</td>
							<td class="text-right">
								<button class="btn btn-secondary" @onclick="@( (e) => NavigationManager.NavigateTo($"/items/delete/{item.Id}") )">
									Delete
								</button>
							</td>
						</tr>
						
						<tr data-id="">
							<td data-toggle="tooltip" data-container="body" data-placement="top" title="">aaa111</td>
							<td data-toggle="tooltip" data-container="body" data-placement="top" title="">bbb111</td>
							<td data-toggle="tooltip" data-container="body" data-placement="top" title="">ccc111</td>
							<td>ddd111</td>
							<td>eee111</td>
							<td>fff111</td>
							<td class="text-right">
								<button class="btn btn-secondary" @onclick="@( (e) => NavigationManager.NavigateTo($"/items/edit/{item.Id}") )">
									Edit
								</button>
							</td>
							<td class="text-right">
								<button class="btn btn-secondary" @onclick="@( (e) => NavigationManager.NavigateTo($"/items/delete/{item.Id}") )">
									Delete
								</button>
							</td>
						</tr>
						
						<tr data-id="">
							<td data-toggle="tooltip" data-container="body" data-placement="top" title="">aaa111</td>
							<td data-toggle="tooltip" data-container="body" data-placement="top" title="">bbb111</td>
							<td data-toggle="tooltip" data-container="body" data-placement="top" title="">ccc111</td>
							<td>ddd111</td>
							<td>eee111</td>
							<td>fff111</td>
							<td class="text-right">
								<button class="btn btn-secondary" @onclick="@( (e) => NavigationManager.NavigateTo($"/items/edit/{item.Id}") )">
									Edit
								</button>
							</td>
							<td class="text-right">
								<button class="btn btn-secondary" @onclick="@( (e) => NavigationManager.NavigateTo($"/items/delete/{item.Id}") )">
									Delete
								</button>
							</td>
						</tr>
						
						<!-- copy patse tr tag from above to make table scrollable -->

					</tbody>
				</table>
				
			</div>
	</div>
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha512-kBFfSXuTKZcABVouRYGnUo35KKa1FBrYgwG4PAx7Z2Heroknm0ca2Fm2TosdrrI356EDHMW383S3ISrwKcVPUw==" crossorigin="anonymous"></script>
    <script src="~/site.js" ></script>
	
  </body>
</html>