My goal was to create a table with a vertical scroll bar that only displays the first 5 data entries, using CSS for styling. However, despite declaring the scroll in the CSS code, it doesn't seem to be working properly. I attempted to implement a fixed header table with a scrolling tbody section; when additional rows are added to the table, only the tbody should scroll. To address different row lengths and ensure proper alignment of data, I utilized percentage-based widths for each column. Here is an example code snippet:
<!DOCTYPE html>
<html lang="en>"
<head>
<meta charset="utf-8">
<title></title>
<meta name "viewport" content="width=device-width initial-scale=1">
<link href"http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css rel="stylesheet">
<!-- Theme CSS -->
<link href"css/style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico ">
<script
src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script
src"https//ajax.googleapis.com/ajax/libs/jQuery/3.3.1/jquery.min.js "></script>
<scriPTextStyle type"text/css ">'
table {
width: 800px;
position: relative;
}
thead {
display: block;
overflow-y: auto;
height: 30px;
max-width: 100%;
top: 0;
font-size: 12px;
}
tbody {
max-width: 100%;
position: absolute;
top: 40px;
height: 2em;
overflow-y: scroll;
display: block;
font-size: 10px;
}
</style>"
</style>
</head>
<div class="container">
<table class="scroll table table-bordered ">
<thead>
<tr>
<th style="width: 2.5%; font-size: 12px;">Sl No</th>
<th style="width: 3%; font-size: 12px;">First Name</th>
<th style="width: 10%; font-size: 12px;">Middle Name</th>
<th style="width: 10%; font-size: 12px;">Last Name</th>
<th style="width: 10%; font-size: 12px;">Email</th>
<th style="width: 10%; font-size: 12px;">Department</th>
</tr>
</thead>
<tbody>
<!-- List of data entries here -->
</tbody>
</table>
</div>
</body>
</html>