Vertical scroll not working for table - javascript

Designed table and tried to make vertical scroll bar for limited 5 data. Had declared scroll in css but it is not working. tried to make fixed header table and tbody scroll. When more row added into the table then tbody(td) should scroll. Used width in % due to adjust the every row data and had tried a code below
<!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>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js "></script>
<style 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;
}
table.scroll {
width: 100%; /* Optional */
/* border-collapse: collapse; */
border-spacing: 0;
border: 2px solid black;
}
table.scroll tbody,
table.scroll thead { display: block; }
</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>
<tr>
<td style="font-size: 11px; ">1</td>
<td style="font-size: 11px; ">User</td>
<td style="font-size: 11px; ">Name</td>
<td style="font-size: 11px;">Unknown</td>
<td style="font-size: 11px; ">username#gmail.com</td>
<td style="font-size: 11px; ">IT Development</td>
</tr>
<tr>
<td style="font-size: 11px; ">12</td>
<td style="font-size: 11px; ">User</td>
<td style="font-size: 11px; ">Name</td>
<td style="font-size: 11px;">Unknown</td>
<td style="font-size: 11px; ">username#gmail.com</td>
<td style="font-size: 11px; ">IT Development</td>
</tr>
<tr>
<td style="font-size: 11px; ">3</td>
<td style="font-size: 11px; ">User</td>
<td style="font-size: 11px; ">Name</td>
<td style="font-size: 11px;">Unknown</td>
<td style="font-size: 11px; ">username#gmail.com</td>
<td style="font-size: 11px; ">IT Development</td>
</tr>
<tr>
<td style="font-size: 11px; ">4</td>
<td style="font-size: 11px; ">User</td>
<td style="font-size: 11px; ">Name</td>
<td style="font-size: 11px;">Unknown</td>
<td style="font-size: 11px; ">username#gmail.com</td>
<td style="font-size: 11px; ">IT Development</td>
</tr>
<tr>
<td style="font-size: 11px; ">5</td>
<td style="font-size: 11px; ">User</td>
<td style="font-size: 11px; ">Name</td>
<td style="font-size: 11px;">Unknown</td>
<td style="font-size: 11px; ">username#gmail.com</td>
<td style="font-size: 11px; ">IT Development</td>
</tr>
<tr>
<td style="font-size: 11px; ">6</td>
<td style="font-size: 11px; ">User</td>
<td style="font-size: 11px; ">Name</td>
<td style="font-size: 11px;">Unknown</td>
<td style="font-size: 11px; ">username#gmail.com</td>
<td style="font-size: 11px; ">IT Development</td>
</tr>
<tr>
<td style="font-size: 11px; ">7</td>
<td style="font-size: 11px; ">User</td>
<td style="font-size: 11px; ">Name</td>
<td style="font-size: 11px;">Unknown</td>
<td style="font-size: 11px; ">username#gmail.com</td>
<td style="font-size: 11px; ">IT Development</td>
</tr>
<tr>
<td style="font-size: 11px; ">8</td>
<td style="font-size: 11px; ">User</td>
<td style="font-size: 11px; ">Name</td>
<td style="font-size: 11px;">Unknown</td>
<td style="font-size: 11px; ">username#gmail.com</td>
<td style="font-size: 11px; ">IT Development</td>
</tr>
<tr>
<td style="font-size: 11px; ">9</td>
<td style="font-size: 11px; ">User</td>
<td style="font-size: 11px; ">Name</td>
<td style="font-size: 11px;">Unknown</td>
<td style="font-size: 11px; ">username#gmail.com</td>
<td style="font-size: 11px; ">IT Development</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>


Try using the below code, this will introduce a vertical scroll in your code
.scroll {
height: 100px;
overflow-y: auto;
}
<!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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js "></script>
<style 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;
}
table {
width: 100%;
/* Optional */
/* border-collapse: collapse; */
border-spacing: 0;
border: 2px solid black;
}
table tbody,
table thead {
display: block;
}
</style>
</head>
<div class="container ">
<div class="scroll">
<table class=" 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>
<tr>
<td style="font-size: 11px; ">1</td>
<td style="font-size: 11px; ">User</td>
<td style="font-size: 11px; ">Name</td>
<td style="font-size: 11px;">Unknown</td>
<td style="font-size: 11px; ">username#gmail.com</td>
<td style="font-size: 11px; ">IT Development</td>
</tr>
<tr>
<td style="font-size: 11px; ">12</td>
<td style="font-size: 11px; ">User</td>
<td style="font-size: 11px; ">Name</td>
<td style="font-size: 11px;">Unknown</td>
<td style="font-size: 11px; ">username#gmail.com</td>
<td style="font-size: 11px; ">IT Development</td>
</tr>
<tr>
<td style="font-size: 11px; ">3</td>
<td style="font-size: 11px; ">User</td>
<td style="font-size: 11px; ">Name</td>
<td style="font-size: 11px;">Unknown</td>
<td style="font-size: 11px; ">username#gmail.com</td>
<td style="font-size: 11px; ">IT Development</td>
</tr>
<tr>
<td style="font-size: 11px; ">4</td>
<td style="font-size: 11px; ">User</td>
<td style="font-size: 11px; ">Name</td>
<td style="font-size: 11px;">Unknown</td>
<td style="font-size: 11px; ">username#gmail.com</td>
<td style="font-size: 11px; ">IT Development</td>
</tr>
<tr>
<td style="font-size: 11px; ">5</td>
<td style="font-size: 11px; ">User</td>
<td style="font-size: 11px; ">Name</td>
<td style="font-size: 11px;">Unknown</td>
<td style="font-size: 11px; ">username#gmail.com</td>
<td style="font-size: 11px; ">IT Development</td>
</tr>
<tr>
<td style="font-size: 11px; ">6</td>
<td style="font-size: 11px; ">User</td>
<td style="font-size: 11px; ">Name</td>
<td style="font-size: 11px;">Unknown</td>
<td style="font-size: 11px; ">username#gmail.com</td>
<td style="font-size: 11px; ">IT Development</td>
</tr>
<tr>
<td style="font-size: 11px; ">7</td>
<td style="font-size: 11px; ">User</td>
<td style="font-size: 11px; ">Name</td>
<td style="font-size: 11px;">Unknown</td>
<td style="font-size: 11px; ">username#gmail.com</td>
<td style="font-size: 11px; ">IT Development</td>
</tr>
<tr>
<td style="font-size: 11px; ">8</td>
<td style="font-size: 11px; ">User</td>
<td style="font-size: 11px; ">Name</td>
<td style="font-size: 11px;">Unknown</td>
<td style="font-size: 11px; ">username#gmail.com</td>
<td style="font-size: 11px; ">IT Development</td>
</tr>
<tr>
<td style="font-size: 11px; ">9</td>
<td style="font-size: 11px; ">User</td>
<td style="font-size: 11px; ">Name</td>
<td style="font-size: 11px;">Unknown</td>
<td style="font-size: 11px; ">username#gmail.com</td>
<td style="font-size: 11px; ">IT Development</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>


Basically, I think you need two tables, like this.
<!-- table for header -->
<table class="table table-bordered mb-0">
<thead>
~
</thead>
</table>
<!-- div for scroll -->
<div class="scroll-area">
<!-- table for data -->
<table class="table table-bordered">
<tbody>
~
</tbody>
</table>
</div>
I like this way because it's really flexible.
However, if you want to show the scroll bar(I mean, take the width for the scroll bar), this way might be not good.
If the layout is simple, you can use position: sticky.
position: sticky;
top:0;
I hope they will help you.

Related

How do I hide and show individual tables based on button selction?

So, I am pretty new to Js and I don't really know what I am doing here. I have three links that hide/show 3 different tables. I have gotten them to work but, what I want ideally, is that when the various links are clicked, they should hide the other two tables that are not selected. So, I only in theory have the table that has been selected displaying. I'm not sure how to do this. Would be eternally grateful if someone could point me in the right direction here. I have included my code here.
function toggleTable1() {
var elem = document.getElementById("loginTable1");
var hide = elem.style.display == "none";
if (hide) {
elem.style.display = "table";
} else {
elem.style.display = "none";
}
}
function toggleTable2() {
var elem = document.getElementById("loginTable2");
var hide = elem.style.display == "none";
if (hide) {
elem.style.display = "table";
} else {
elem.style.display = "none";
}
}
function toggleTable3() {
var elem = document.getElementById("loginTable3");
var hide = elem.style.display == "none";
if (hide) {
elem.style.display = "table";
} else {
elem.style.display = "none";
}
}
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<a id="loginLink1" onclick="toggleTable1();" href="#">Login1</a>
<a id="loginLink2" onclick="toggleTable2();" href="#">Login2</a>
<a id="loginLink3" onclick="toggleTable3();" href="#">Login3</a>
<table id="loginTable1" width="1139" height="327" border="0">
<tbody>
<tr>
<th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Individuals<span style="font-weight: 700; text-align: center;"></span></th>
</tr>
<tr>
<th width="160" height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td width="84" bgcolor="#FFFFFF"> </td>
<td width="309" bgcolor="#FFFFFF"> </td>
<td width="364" bgcolor="#FFFFFF"> </td>
<td width="200" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="56" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Telephony Agent A</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/css/images/slider-1/1.png" width="750" height="33" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent B</span></span>
</td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="61" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Telephony Agent C</span> </th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/css/images/slider-1/2.png" width="750" height="33" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent D</span></span>
</td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="59" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;" scope="row"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent E</span></span>
</th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/css/images/slider-1/3.png" width="750" height="33" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent F</span></span>
</td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
</tbody>
</table>
<table id="loginTable2" width="1139" height="327" border="0" style="display: none">
<tbody>
<tr>
<th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Branches<span style="font-weight: 700; text-align: center;"></span></th>
</tr>
<tr>
<th width="160" height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td width="84" bgcolor="#FFFFFF"> </td>
<td width="309" bgcolor="#FFFFFF"> </td>
<td width="364" bgcolor="#FFFFFF"> </td>
<td width="200" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="56" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Sandton City Branch</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/1#2x.jpg" width="750" height="33" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: ##005c61; font-size: 12px;">Mall of Africa Branch</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="61" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Bank City Branch</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/2#2x.jpg" width="750" height="35" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: #005c61; font-size: 12px;">West Street branch</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="59" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Springs Mall Branch</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/3#2x.jpg" width="750" height="35" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="text-decoration-color: #005c61; font-size: 12px;">Westgate Mall Branch</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
</tbody>
</table>
<table id="loginTable3" width="1139" height="327" border="0" style="display: none">
<tbody>
<tr>
<th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Region</th>
</tr>
<tr>
<th width="160" height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td width="84" bgcolor="#FFFFFF"> </td>
<td width="309" bgcolor="#FFFFFF"> </td>
<td width="364" bgcolor="#FFFFFF"> </td>
<td width="200" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="56" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Inland</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/region/1#2x.jpg" width="750" height="34" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: ##005c61; font-size: 12px;">Eastern Cape</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="61" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Gauteng North</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/region/2#2x.jpg" width="750" height="35" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: #005c61; font-size: 12px;">Gauteng South</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="59" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Soshanguve</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/3#2x.jpg" width="750" height="35" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="text-decoration-color: #005c61; font-size: 12px;">Ga-Rankuwa</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
</tbody>
</table>
<body>
</body>
</html>

I would suggest something like this:
function toggleTable1() {
var elem1 = document.getElementById("loginTable1");
var elem2 = document.getElementById("loginTable2");
var elem3 = document.getElementById("loginTable3");
var hide = elem.style.display === "none";
if (hide) {
elem1.style.display = "table";
elem2.style.display = "none";
elem3.style.display = "none";
} else {
elem1.style.display = "none";
elem2.style.display = "none";
elem3.style.display = "none";
}
}

You need to hide all tables first then show the table you want to show.
I modified some of the code to make it more dynamic.
Not much, but honest work.
function hideAllTables(){
document.getElementById("loginTable1").style.display = 'none';
document.getElementById("loginTable2").style.display = 'none';
document.getElementById("loginTable3").style.display = 'none';
}
function toggleTable(tableId){
hideAllTables();
var elem = document.getElementById(tableId)
elem.style.display = "table";
}
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<a id="loginLink1" onclick="toggleTable('loginTable1');" href="#">Login1</a>
<a id="loginLink2" onclick="toggleTable('loginTable2');" href="#">Login2</a>
<a id="loginLink3" onclick="toggleTable('loginTable3');" href="#">Login3</a>
<table id="loginTable1" width="1139" height="327" border="0">
<tbody>
<tr>
<th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Individuals<span style="font-weight: 700; text-align: center;"></span></th>
</tr>
<tr>
<th width="160" height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td width="84" bgcolor="#FFFFFF"> </td>
<td width="309" bgcolor="#FFFFFF"> </td>
<td width="364" bgcolor="#FFFFFF"> </td>
<td width="200" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="56" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Telephony Agent A</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/css/images/slider-1/1.png" width="750" height="33" alt=""/></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent B</span></span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="61" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Telephony Agent C</span> </th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/css/images/slider-1/2.png" width="750" height="33" alt=""/></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent D</span></span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="59" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;" scope="row"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent E</span></span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/css/images/slider-1/3.png" width="750" height="33" alt=""/></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent F</span></span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
</tbody>
</table>
<table id="loginTable2" width="1139" height="327" border="0" style="display: none">
<tbody>
<tr>
<th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Branches<span style="font-weight: 700; text-align: center;"></span></th>
</tr>
<tr>
<th width="160" height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td width="84" bgcolor="#FFFFFF"> </td>
<td width="309" bgcolor="#FFFFFF"> </td>
<td width="364" bgcolor="#FFFFFF"> </td>
<td width="200" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="56" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Sandton City Branch</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/1#2x.jpg" width="750" height="33" alt=""/></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: ##005c61; font-size: 12px;">Mall of Africa Branch</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="61" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Bank City Branch</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/2#2x.jpg" width="750" height="35" alt=""/></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: #005c61; font-size: 12px;">West Street branch</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="59" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Springs Mall Branch</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/3#2x.jpg" width="750" height="35" alt=""/></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="text-decoration-color: #005c61; font-size: 12px;">Westgate Mall Branch</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
</tbody>
</table>
<table id="loginTable3" width="1139" height="327" border="0" style="display: none">
<tbody>
<tr>
<th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Region</th>
</tr>
<tr>
<th width="160" height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td width="84" bgcolor="#FFFFFF"> </td>
<td width="309" bgcolor="#FFFFFF"> </td>
<td width="364" bgcolor="#FFFFFF"> </td>
<td width="200" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="56" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Inland</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/region/1#2x.jpg" width="750" height="34" alt=""/></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: ##005c61; font-size: 12px;">Eastern Cape</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="61" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Gauteng North</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/region/2#2x.jpg" width="750" height="35" alt=""/></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: #005c61; font-size: 12px;">Gauteng South</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="59" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Soshanguve</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/3#2x.jpg" width="750" height="35" alt=""/></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="text-decoration-color: #005c61; font-size: 12px;">Ga-Rankuwa</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
</tbody>
</table>
<body>
</body>
</html>

You should delegate and use a data-attribute
I also added a class hide that can be toggled
window.addEventListener("load", function() {
document.getElementById("nav").addEventListener("click", function(e) {
e.preventDefault(); // stop the link
const tgt = e.target;
[...this.querySelectorAll("a")]
.forEach(link => {
document.getElementById(link.dataset.id).classList.add("hide")
});
document.getElementById(tgt.dataset.id).classList.remove("hide")
})
})
.hide {
display: none
}
<nav id="nav">
<a data-id="loginTable1" href="#">Login1</a>
<a data-id="loginTable2" href="#">Login2</a>
<a data-id="loginTable3" href="#">Login3</a>
</nav>
<table id="loginTable1" width="1139" height="327" border="0">
<thead>
<tr>
<th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Individuals<span style="font-weight: 700; text-align: center;"></span></th>
</tr>
</thead>
</table>
<table id="loginTable2" width="1139" height="327" border="0" class="hide">
<thead>
<tr>
<th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Branches<span style="font-weight: 700; text-align: center;"></span></th>
</tr>
</thead>
</table>
<table id="loginTable3" width="1139" height="327" border="0" class="hide">
<thead>
<tr>
<th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Region</th>
</tr>
</thead>
</table>

I think this the exact solution for you question
- You can add more table and button to "tableList" array
var tableList = [
{
button: document.querySelector('#loginLink1'),
table: document.querySelector('#loginTable1')
},
{
button: document.querySelector('#loginLink2'),
table: document.querySelector('#loginTable2')
},
{
button: document.querySelector('#loginLink3'),
table: document.querySelector('#loginTable3')
}
]
function toggleTable(button) {
for(var tableItem of tableList) {
if(tableItem.button == button)
tableItem.table.style.display = 'block';
else tableItem.table.style.display = 'none';
}
}
tableList.forEach(tableItem => {
tableItem.button.addEventListener('click', function() {
toggleTable(this);
});
});
<a id="loginLink1" href="#">Login1</a>
<a id="loginLink2" href="#">Login2</a>
<a id="loginLink3" href="#">Login3</a>
<table id="loginTable1" width="1139" height="327" border="0">
<tbody>
<tr>
<th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Individuals<span style="font-weight: 700; text-align: center;"></span></th>
</tr>
<tr>
<th width="160" height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td width="84" bgcolor="#FFFFFF"> </td>
<td width="309" bgcolor="#FFFFFF"> </td>
<td width="364" bgcolor="#FFFFFF"> </td>
<td width="200" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="56" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Telephony Agent A</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/css/images/slider-1/1.png" width="750" height="33" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent B</span></span>
</td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="61" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Telephony Agent C</span> </th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/css/images/slider-1/2.png" width="750" height="33" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent D</span></span>
</td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="59" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;" scope="row"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent E</span></span>
</th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/css/images/slider-1/3.png" width="750" height="33" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent F</span></span>
</td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
</tbody>
</table>
<table id="loginTable2" width="1139" height="327" border="0" style="display: none">
<tbody>
<tr>
<th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Branches<span style="font-weight: 700; text-align: center;"></span></th>
</tr>
<tr>
<th width="160" height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td width="84" bgcolor="#FFFFFF"> </td>
<td width="309" bgcolor="#FFFFFF"> </td>
<td width="364" bgcolor="#FFFFFF"> </td>
<td width="200" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="56" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Sandton City Branch</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/1#2x.jpg" width="750" height="33" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: ##005c61; font-size: 12px;">Mall of Africa Branch</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="61" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Bank City Branch</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/2#2x.jpg" width="750" height="35" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: #005c61; font-size: 12px;">West Street branch</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="59" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Springs Mall Branch</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/3#2x.jpg" width="750" height="35" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="text-decoration-color: #005c61; font-size: 12px;">Westgate Mall Branch</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
</tbody>
</table>
<table id="loginTable3" width="1139" height="327" border="0" style="display: none">
<tbody>
<tr>
<th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Region</th>
</tr>
<tr>
<th width="160" height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td width="84" bgcolor="#FFFFFF"> </td>
<td width="309" bgcolor="#FFFFFF"> </td>
<td width="364" bgcolor="#FFFFFF"> </td>
<td width="200" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="56" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Inland</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/region/1#2x.jpg" width="750" height="34" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: ##005c61; font-size: 12px;">Eastern Cape</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="61" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Gauteng North</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/region/2#2x.jpg" width="750" height="35" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: #005c61; font-size: 12px;">Gauteng South</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="59" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Soshanguve</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/3#2x.jpg" width="750" height="35" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="text-decoration-color: #005c61; font-size: 12px;">Ga-Rankuwa</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
</tbody>
</table>

th and td not getting same width

I am not able to match the width of td and th and get a gap between the table and the scrollbar.
.table_fixed tbody {
display: block;
height: 500px;
overflow-y: scroll;
}
.table_fixed thead {
display: block;
}
Please see the below jsfiddle to see the entire code:
https://jsfiddle.net/w80bz1vc/

There was some unnecessary css which I've removed,
These two rules specifically,
.table_fixed tbody {
display: block;
height: 500px;
overflow-y: scroll;
}
.table_fixed thead {
display: block;
float: inline-end;
}
As a rule of thumb, try not to change the display property of the default table elements as much as possible.
body {
background-image: url("https://img.collegedekhocdn.com/media/img/institute/crawled_images/10450_gogte_new.jpg?tr=w-250,h-150");
background-repeat: round;
background-attachment: fixed;
background-size: cover;
}
#logo {
position: fixed;
top: 0;
left: 0;
}
table {
font-family: arial, sans-serif;
width: 70%;
margin: 0 auto;
border: 1px solid;
}
td,
th {
border: 1px solid black;
text-align: center;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f3e5f5;
}
tr:nth-child(odd) {
background-color: #fff;
}
h2 {
text-align: center;
font-family: "Times New Roman", Times, serif;
margin: 1rem;
}
.pink-bg {
background-color: #f3e5f5;
}
#admin-login-id {
justify-content: flex;
position: absolute;
right: 45%;
align-content: center;
}
.loader {
position: absolute;
bottom: 50%;
right: 50%;
}
.admin_button {
text-align: center;
}
.add_button {
text-align: center;
display: none;
}
.title_class {
display: none;
}
.add2_button {
display: none;
text-align: center;
}
.disable-delete {
cursor: pointer;
color: gray;
}
.active-delete {
cursor: pointer;
/* add external cursor */
color: Black;
background-color: red;
}
<table class="tab_id table_fixed" style="">
<!--Spinner -->
<thead>
<tr class="th purple lighten-2">
<th class="sem_count" colspan="2">BCA I Sem</th>
<th class="sem_count" colspan="2">BCA II Sem</th>
<th class="sem_count" colspan="2">BCA III Sem</th>
<th class="remove_col"></th>
</tr>
<tr class="purple lighten-4">
<th>Subject</th>
<th>Professor</th>
<th>Subject</th>
<th>Professor</th>
<th>Subject</th>
<th>Professor</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr>
<td class="Mathematics_class">Mathematics</td>
<td>Sharma Sir</td>
<td class="Mathematics_class">Mathematics</td>
<td>Sharma Sir</td>
<td class="Mathematics_class">Mathematics</td>
<td>Sharma Sir</td>
<td><i onclick="deleteSubject('Mathematics')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
</tr>
<tr>
<td class="English_class">English</td>
<td>Gouri Mam</td>
<td class="English_class">English</td>
<td>Gouri Mam</td>
<td class="English_class">English</td>
<td>Gouri Mam</td>
<td><i onclick="deleteSubject('English')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
</tr>
<tr>
<td class="Sanskrit_class">Sanskrit</td>
<td>Virat Sir</td>
<td class="Sanskrit_class">Sanskrit</td>
<td>Virat Sir</td>
<td class="Sanskrit_class">Sanskrit</td>
<td>Virat Sir</td>
<td><i onclick="deleteSubject('Sanskrit')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
</tr>
<tr>
<td class="Science_class">Science</td>
<td>Shivani Mam</td>
<td class="Science_class">Science</td>
<td>Shivani Mam</td>
<td class="Science_class">Science</td>
<td>Shivani Mam</td>
<td><i onclick="deleteSubject('Science')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
</tr>
<tr>
<td class="Electronics_class">Electronics</td>
<td>Shishir Sir</td>
<td class="Electronics_class">Electronics</td>
<td>Shishir Sir</td>
<td class="Electronics_class">Electronics</td>
<td>Shishir Sir</td>
<td><i onclick="deleteSubject('Electronics')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
</tr>
<tr>
<td class="Testing_class">Testing</td>
<td>Vaishali Mam</td>
<td class="Testing_class">Testing</td>
<td>Vaishali Mam</td>
<td class="Testing_class">Testing</td>
<td>Vaishali Mam</td>
<td><i onclick="deleteSubject('Testing')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
</tr>
<tr>
<td class="Chemestry_class">Chemestry</td>
<td>Subbu Sir</td>
<td class="Chemestry_class">Chemestry</td>
<td>Subbu Sir</td>
<td class="Chemestry_class">Chemestry</td>
<td>Subbu Sir</td>
<td><i onclick="deleteSubject('Chemestry')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
</tr>
<tr>
<td class="Hindi_class">Hindi</td>
<td>Jadu sir</td>
<td class="Hindi_class">Hindi</td>
<td>Jadu sir</td>
<td class="Hindi_class">Hindi</td>
<td>Jadu sir</td>
<td><i onclick="deleteSubject('Hindi')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
</tr>
<tr>
<td class="A_class">A</td>
<td>ASD</td>
<td class="A_class">A</td>
<td>ASD</td>
<td class="A_class">A</td>
<td>ASD</td>
<td><i onclick="deleteSubject('A')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
</tr>
<tr>
<td class="R_class">R</td>
<td>FGH</td>
<td class="R_class">R</td>
<td>FGH</td>
<td class="R_class">R</td>
<td>FGH</td>
<td><i onclick="deleteSubject('R')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
</tr>
<tr>
<td class="Physics_class">Physics</td>
<td>Ramesh</td>
<td class="Physics_class">Physics</td>
<td>Ramesh</td>
<td class="Physics_class">Physics</td>
<td>Ramesh</td>
<td><i onclick="deleteSubject('Physics')" class="material-icons disable-delete" style="background-color: red; color: black;">delete</i></td>
</tr>
</tbody>
</table>

How to apply link to entire button rather than just the text

Is there a way to assign the link to the whole button, so that it is easier to interact with instead of having to click on the text itself?
<table style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-line-height-rule: exactly; border-collapse: collapse !important;" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#000000">
<tbody>
<tr>
<td align="center" width="250px" style="padding: 20px 10px; width: 250px;">
<a rel="noopener noreferrer" href="https://www.thermador.com/us/dealer-locator?cid=April21SSElead1v2|emai|en|noc|adhoc|thd|own|12468|engage|finddealer_cta" target="_blank" title="FIND DEALER" style="font-family: Avenir, Arial, san-serif; color: #ffffff; text-decoration: none; line-height: 14px; white-space: nowrap; font-size: 15px; font-weight: normal; letter-spacing: 3px;"
data-sap-hpa-ceimo-link-id="202004221731488" data-sap-hpa-ceimo-link-outboundid=" " data-sap-hpa-ceimo-link-utm="X" data-sap-hpa-ceimo-link-trackable="X" data-sap-hpa-ceimo-link-type="Static">FIND DEALER</a>
</td>
</tr>
</tbody>
</table>

Simple. Just apply the sizing CSS to the <a> element instead and give it an inline-block display type since anchors are by default inline and will not render any padding.
a
{
padding: 20px 10px;
width: 250px;
text-align: center;
display: inline-block;
}
<table style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-line-height-rule: exactly; border-collapse: collapse !important;" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#000000">
<tbody>
<tr>
<td align="center"><a rel="noopener noreferrer" href="https://www.thermador.com/us/dealer-locator?cid=April21SSElead1v2|emai|en|noc|adhoc|thd|own|12468|engage|finddealer_cta" target="_blank" title="FIND DEALER" style="font-family: Avenir, Arial, san-serif; color: #ffffff; text-decoration: none; line-height: 14px; white-space: nowrap; font-size: 15px; font-weight: normal; letter-spacing: 3px;"
data-sap-hpa-ceimo-link-id="202004221731488" data-sap-hpa-ceimo-link-outboundid=" " data-sap-hpa-ceimo-link-utm="X" data-sap-hpa-ceimo-link-trackable="X" data-sap-hpa-ceimo-link-type="Static">FIND DEALER</a></td>
</tr>
</tbody>
</table>

HTML: Screen stutters during scrolling when crossing sticky text thats fixed at top of page

I tried searching stack overflow thinking that surely someone would have asked this noob question already. I couldn't find the solution to this hence posting as new question.
I have a HTML code that I need to show as a report.
<html>
<style>
body {
background-color: rgb(59, 75, 84);
font-family: arial, verdana, trebuchet, officina, sans-serif;
margin: 1; }
.top-container {
background-color: #f1f1f1;
padding: 1px;
text-align: center;
}
.mid-container {
background-color: rgb(38, 52 ,63);
padding: 1px;
text-align: left;
}
.header {
text-align: center;
padding: 5px 8px;
background: rgb(25, 165, 88);
color: #f1f1f1;
position:relative;
margin: 1;
z-index: 100;
}
.mid-container {
padding: 1px;
}
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.sticky + .mid-container {
position:absolute;
overflow: auto;
padding-top:auto;
}
table
{
margin-bottom: 10px;
vertical-align: top;
border: 0;
border-spacing: 1px;
padding: 2px;
}
.HeadingTable
{
width: 100%;
text-align: center;
margin-top: 15px;
margin-bottom: 30px;
margin-left: auto;
margin-right: auto;
background-color: rgb(220, 221, 222);
}
.SubHeadingTable
{
width: 100%;
text-align: center;
margin-top: 15px;
margin-bottom: 25px;
background-color: rgb(220, 221, 222);
}
.ResultTable
{
width: 100%;
text-align: left;
padding-right: 20px;
}
table.ResultTable td
{
vertical-align: top;
}
.OverallResultTable
{
width: 50%;
text-align: center;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
font-weight: bold;
}
.TableHeadingCell
{
background-color: rgb(179, 179, 179);
font-family: arial, verdana, trebuchet, officina, sans-serif;
font-weight: bold;
text-align: center;
}
.CellNoColor
{
text-align: left;
vertical-align: top;
}
.DefaultCell
{
background-color: rgb(229, 229, 229);
text-align: left;
}
.NumberCell
{
background-color: rgb(229, 229, 229);
text-align: center;
min-width: 50px;
}
.PositiveResultCell
{
text-align: center;
background-color: rgb(25, 165, 88);
}
.NegativeResultCell
{
text-align: center;
background-color: rgb(240, 0, 0);
}
.WarningCell
{
text-align: center;
background-color: rgb(255, 255, 0);
}
.NegativeResult
{
background-color: rgb(240, 0, 0);
text-align: center;
font-weight: bold;
}
.PositiveResult
{
background-color: rgb(25, 165, 88);
text-align: center;
font-weight: bold;
}
.Heading1
{
font-family: arial, sans-serif;
font-weight: bold;
font-size: 26px;
}
.Heading2
{
font-family: arial, sans-serif;
font-weight: bold;
font-size: 20px;
}
.Heading3
{
font-family: arial, sans-serif;
font-weight: bold;
font-size: 18px;
margin-bottom: 20px;
margin-top: 20px;
}
.Heading4
{
font-family: arial, sans-serif;
font-weight: bold;
font-size: 16px;
margin-top: 10px;
margin-bottom: 10px;
}
.Heading5
{
font-family: arial, sans-serif;
font-weight: bold;
font-size: 14px;
margin-top: 8px;
margin-bottom: 8px;
}
p
{
Margin-bottom: 20px;
}
.TestGroupHeadingBackground
{
background-color: rgb(179, 179, 179);
}
.Indentation
{
margin-left: 20px;
}
</style>
<head>
<title>NVM Comparision Report</title>
</head>
<body>
<div class="top-container">
<h1>NVM Memory Comparision Report</h1>
</div>
<div class="header" id="myHeader">
<h2>Overall Report Passed</h2>
</div>
<div class="mid-container">
<h3>General Information</h3>
</div>
<div class="Heading4">Test Setup</div>
<div class="Indentation">
<table cellpadding="10">
<td class="CellNoColor">Report Generation: </td>
<td class="CellNoColor">Success</td>
</tr>
<tr>
<td class="CellNoColor">File's Root Path: </td>
<td class="CellNoColor">New XXX Path: XXX</td>
</tr>
<tr>
<td class="CellNoColor">Configuration Comment: </td>
<td class="CellNoColor">XXX</td>
</tr>
<tr>
<td class="CellNoColor">XXX: </td>
<td class="CellNoColor">XXX</td>
</tr>
</table>
</div>
<div class="Heading4">Blocks Present in DataConfig</div>
<div class="Heading5">New Version:0042</div>
<div class="Indentation" style="float: none;">
<table cellpadding="5" width = "70%">
<tr>
<th class="TableHeadingCell" width="18%">Dataset Name</th>
<th class="TableHeadingCell" width="12%" text-align:center;>SparePart Number</th>
<th class="TableHeadingCell">Blocks Present</th>
<th class="TableHeadingCell" width="10%">Result</th>
</tr>
<tr>
<td class="TableHeadingCell">All Datasets</td>
<td class="DefaultCell" style = text-align:center;>All Sparepart Numbers</td>
<td class="DefaultCell"> Blocks 81, 99, 115, 120, 121, 133</td>
<td class="PositiveResult">Pass</td>
</tr>
</table>
</div>
<div class="Heading5">Old Version:0041</div>
<div class="Indentation" style="float: none;">
<table cellpadding="5" width = "70%">
<tr>
<th class="TableHeadingCell" width="18%">Dataset Name</th>
<th class="TableHeadingCell" width="12%" text-align:center;>SparePart Number</th>
<th class="TableHeadingCell">Blocks Present</th>
<th class="TableHeadingCell" width="10%">Result</th>
</tr>
<tr>
<td class="TableHeadingCell">All Datasets</td>
<td class="DefaultCell" style = text-align:center;>All Sparepart Numbers</td>
<td class="DefaultCell"> Blocks 81, 99, 115</td>
<td class="PositiveResult">Pass</td>
</tr>
</table>
</div>
<div class="Heading4">Following Blocks are Missing in New FEE Dumps:</div>
<div class="Indentation" style="float: none;">
<table cellpadding="5" width = "70%">
<tr>
<th class="TableHeadingCell" width="18%">File Name</th>
<th class="TableHeadingCell" width="12%" text-align:center;>SparePart Number</th>
<th class="TableHeadingCell">Blocks Missing</th>
<th class="TableHeadingCell" width="10%">Result</th>
</tr>
<tr>
<td class="TableHeadingCell">All Files</td>
<td class="DefaultCell" style = text-align:center;>All</td>
<td class="DefaultCell"></td>
<td class="WarningCell" rowspan=2>Pass</td>
</tr>
</table>
</div>
<div class="Heading4">Following Blocks are Missing in Old FEE Dumps:</div>
<div class="Indentation" style="float: none;">
<table cellpadding="5" width = "70%">
<tr>
<th class="TableHeadingCell" width="18%">File Name</th>
<th class="TableHeadingCell" width="12%" text-align:center;>SparePart Number</th>
<th class="TableHeadingCell">Blocks Missing</th>
<th class="TableHeadingCell" width="10%">Result</th>
</tr>
<tr>
<td class="TableHeadingCell">All Files</td>
<td class="DefaultCell" style = text-align:center;>All</td>
<td class="DefaultCell"></td>
<td class="WarningCell" rowspan=2>Pass</td>
</tr>
</table>
</div>
<table cellpadding="5" class="SubHeadingTable">
<tr>
<td>
<big class="Heading2">Detailed Comparision Between FEE DUMPs</big>
</td>
</tr>
</table>
<div class="Indentation"></div>
<table cellpadding="5" class="TestGroupHeadingBackground">
<tr>
<td>
<big class="Heading3">XXX : </big>
</td>
</tr>
</table>
<div class="Indentation">
<p>Report is based on data obtained from comparing files XXX and XXX in folder RdW.</p>
</div>
<div class="Indentation"></div>
<div class="Indentation">
<table cellpadding="5" class="ResultTable">
<tr>
<th class="TableHeadingCell" width="4%">Block ID</th>
<th class="TableHeadingCell" width="4%">Block Address</th>
<th class="TableHeadingCell" width="10%">Block Name</th>
<th class="TableHeadingCell" width="10%">Parameter Name</th>
<th class="TableHeadingCell" width="4%">Size</th>
<th class="TableHeadingCell" width="auto">Old Data</th>
<th class="TableHeadingCell" width="auto">New Data</th>
<th class="TableHeadingCell" width="8%">Result</th>
</tr>
<tr>
<td style="vertical-align: middle;" class="NumberCell">3</td>
<td style="vertical-align: middle;" class="NumberCell">0x03000100</td>
<td style="vertical-align: middle;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="NumberCell">4 Bytes</td>
<td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="WarningCell">Value Changed</td>
</tr>
<tr>
<td style="vertical-align: middle;" class="NumberCell">5</td>
<td style="vertical-align: middle;" class="NumberCell">0x03000300</td>
<td style="vertical-align: middle;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="NumberCell">4 Bytes</td>
<td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="WarningCell">Value Changed</td>
</tr>
<tr>
<td style="vertical-align: middle;" class="NumberCell">45</td>
<td style="vertical-align: middle;" class="NumberCell">0x03002F00</td>
<td style="vertical-align: middle;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="NumberCell">5 Bytes</td>
<td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="WarningCell">Value Changed</td>
</tr>
</table>
</div>
<div class="Indentation"></div>
<table cellpadding="5" class="TestGroupHeadingBackground">
<tr>
<td>
<big class="Heading3">XXX</big>
</td>
</tr>
</table>
<div class="Indentation">
<p>Report is based on data obtained from comparing files XXX and XXX in folder USA.</p>
</div>
<div class="Indentation"></div>
<div class="Indentation">
<table cellpadding="5" class="ResultTable">
<tr>
<th class="TableHeadingCell" width="4%">Block ID</th>
<th class="TableHeadingCell" width="4%">Block Address</th>
<th class="TableHeadingCell" width="10%">Block Name</th>
<th class="TableHeadingCell" width="10%">Parameter Name</th>
<th class="TableHeadingCell" width="4%">Size</th>
<th class="TableHeadingCell" width="auto">Old Data</th>
<th class="TableHeadingCell" width="auto">New Data</th>
<th class="TableHeadingCell" width="8%">Result</th>
</tr>
<tr>
<td style="vertical-align: middle;" class="NumberCell">3</td>
<td style="vertical-align: middle;" class="NumberCell">0x03000100</td>
<td style="vertical-align: middle;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="NumberCell">4 Bytes</td>
<td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="WarningCell">Value Changed</td>
</tr>
<tr>
<td style="vertical-align: middle;" class="NumberCell">5</td>
<td style="vertical-align: middle;" class="NumberCell">0x03000300</td>
<td style="vertical-align: middle;" class="DefaultCell">Fbl_Global</td>
<td style="vertical-align: middle;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="NumberCell">4 Bytes</td>
<td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="WarningCell">Value Changed</td>
</tr>
<tr>
<td style="vertical-align: middle;" class="NumberCell">45</td>
<td style="vertical-align: middle;" class="NumberCell">0x03002F00</td>
<td style="vertical-align: middle;" class="DefaultCell">ProdData</td>
<td style="vertical-align: middle;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="NumberCell">5 Bytes</td>
<td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="WarningCell">Value Changed</td>
</tr>
</table>
</div>
<table cellpadding="5" class="SubHeadingTable">
<tr>
<td>
<big class="Heading2">End of Report</big>
</td>
</tr>
</table>
<div class="Heading4" style="text-align=right;">Author: XXX</div>
<script>
window.onscroll = function()
{
myFunction()
};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction()
{
if (window.pageYOffset > sticky)
{
header.classList.add("sticky");
}
else
{
header.classList.remove("sticky");
}
}
</script>
</body>
When I run it in IE or chrome, the "Overall Report Passed" sticky text becomes fixed at top, but the entire screen flickers a moment when crossing that transistion point. I can fix it for my screen by giving padding-top:63px instead of auto (unsure what auto does) inside .sticky + .mid-container {} block
Can anybody suggest me how I can avoid this flickering altogether+make is common for all screen sizes + resolutions?
I'm using IE 11 + Mozilla Firefox. Flickering only occurs when scrolling down from the sticky text (scrolling from "Overall Report Passed" to "General Information")

What you doing is changing from position relative to absolute by adding this class .sticky which takes the header out of the document flow, at the same time .sticky + .mid-container is applied which applies position absolute on the div.mid-container that's the cause of the stuttering you see, if instead just apply a margin on the div.mid-container so when the header gets outside the document flow the elements don't react to that, so a margin-top equals to the height of the header should do it.
.sticky + .mid-container {
/* position:absolute; Removed */
/* Added : 39px is the height of your header. */
/* If this varies just include js to make it dynamic. */
margin-top:39px;
overflow: auto;
/* padding-top:auto; Removed : auto is not a valid value for padding */
}
window.onscroll = function() {
myFunction()
};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
// i figured it should be '>='
if (window.pageYOffset >= sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(59, 75, 84);
font-family: arial, verdana, trebuchet, officina, sans-serif;
margin: 1;
}
.top-container {
background-color: #f1f1f1;
padding: 1px;
text-align: center;
}
.mid-container {
background-color: rgb(38, 52, 63);
padding: 1px;
text-align: left;
}
.header {
text-align: center;
padding: 5px 8px;
background: rgb(25, 165, 88);
color: #f1f1f1;
position: relative;
margin: 1;
z-index: 100;
}
.mid-container {
padding: 1px;
}
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.sticky+.mid-container {
margin-top: 39px;
overflow: auto;
}
table {
margin-bottom: 10px;
vertical-align: top;
border: 0;
border-spacing: 1px;
padding: 2px;
}
.HeadingTable {
width: 100%;
text-align: center;
margin-top: 15px;
margin-bottom: 30px;
margin-left: auto;
margin-right: auto;
background-color: rgb(220, 221, 222);
}
.SubHeadingTable {
width: 100%;
text-align: center;
margin-top: 15px;
margin-bottom: 25px;
background-color: rgb(220, 221, 222);
}
.ResultTable {
width: 100%;
text-align: left;
padding-right: 20px;
}
table.ResultTable td {
vertical-align: top;
}
.OverallResultTable {
width: 50%;
text-align: center;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
font-weight: bold;
}
.TableHeadingCell {
background-color: rgb(179, 179, 179);
font-family: arial, verdana, trebuchet, officina, sans-serif;
font-weight: bold;
text-align: center;
}
.CellNoColor {
text-align: left;
vertical-align: top;
}
.DefaultCell {
background-color: rgb(229, 229, 229);
text-align: left;
}
.NumberCell {
background-color: rgb(229, 229, 229);
text-align: center;
min-width: 50px;
}
.PositiveResultCell {
text-align: center;
background-color: rgb(25, 165, 88);
}
.NegativeResultCell {
text-align: center;
background-color: rgb(240, 0, 0);
}
.WarningCell {
text-align: center;
background-color: rgb(255, 255, 0);
}
.NegativeResult {
background-color: rgb(240, 0, 0);
text-align: center;
font-weight: bold;
}
.PositiveResult {
background-color: rgb(25, 165, 88);
text-align: center;
font-weight: bold;
}
.Heading1 {
font-family: arial, sans-serif;
font-weight: bold;
font-size: 26px;
}
.Heading2 {
font-family: arial, sans-serif;
font-weight: bold;
font-size: 20px;
}
.Heading3 {
font-family: arial, sans-serif;
font-weight: bold;
font-size: 18px;
margin-bottom: 20px;
margin-top: 20px;
}
.Heading4 {
font-family: arial, sans-serif;
font-weight: bold;
font-size: 16px;
margin-top: 10px;
margin-bottom: 10px;
}
.Heading5 {
font-family: arial, sans-serif;
font-weight: bold;
font-size: 14px;
margin-top: 8px;
margin-bottom: 8px;
}
p {
Margin-bottom: 20px;
}
.TestGroupHeadingBackground {
background-color: rgb(179, 179, 179);
}
.Indentation {
margin-left: 20px;
}
<div class="top-container">
<h1>NVM Memory Comparision Report</h1>
</div>
<div class="header" id="myHeader">
<h2>Overall Report Passed</h2>
</div>
<div class="mid-container" style="margin-top: 0px;">
<h3>General Information</h3>
</div>
<div class="Heading4">Test Setup</div>
<div class="Indentation">
<table cellpadding="10">
<tbody>
<tr>
<td class="CellNoColor">Report Generation: </td>
<td class="CellNoColor">Success</td>
</tr>
<tr>
<td class="CellNoColor">File's Root Path: </td>
<td class="CellNoColor">New XXX Path: XXX</td>
</tr>
<tr>
<td class="CellNoColor">Configuration Comment: </td>
<td class="CellNoColor">XXX</td>
</tr>
<tr>
<td class="CellNoColor">XXX: </td>
<td class="CellNoColor">XXX</td>
</tr>
</tbody>
</table>
</div>
<div class="Heading4">Blocks Present in DataConfig</div>
<div class="Heading5">New Version:0042</div>
<div class="Indentation" style="float: none;">
<table cellpadding="5" width="70%">
<tbody>
<tr>
<th class="TableHeadingCell" width="18%">Dataset Name</th>
<th class="TableHeadingCell" width="12%" text-align:center;="">SparePart Number</th>
<th class="TableHeadingCell">Blocks Present</th>
<th class="TableHeadingCell" width="10%">Result</th>
</tr>
<tr>
<td class="TableHeadingCell">All Datasets</td>
<td class="DefaultCell" style="t" ext-align:center;="">All Sparepart Numbers</td>
<td class="DefaultCell"> Blocks 81, 99, 115, 120, 121, 133</td>
<td class="PositiveResult">Pass</td>
</tr>
</tbody>
</table>
</div>
<div class="Heading5">Old Version:0041</div>
<div class="Indentation" style="float: none;">
<table cellpadding="5" width="70%">
<tbody>
<tr>
<th class="TableHeadingCell" width="18%">Dataset Name</th>
<th class="TableHeadingCell" width="12%" text-align:center;="">SparePart Number</th>
<th class="TableHeadingCell">Blocks Present</th>
<th class="TableHeadingCell" width="10%">Result</th>
</tr>
<tr>
<td class="TableHeadingCell">All Datasets</td>
<td class="DefaultCell" style="t" ext-align:center;="">All Sparepart Numbers</td>
<td class="DefaultCell"> Blocks 81, 99, 115</td>
<td class="PositiveResult">Pass</td>
</tr>
</tbody>
</table>
</div>
<table cellpadding="5" class="SubHeadingTable">
<tbody>
<tr>
<td>
<big class="Heading2">Detailed Comparision Between FEE DUMPs</big>
</td>
</tr>
</tbody>
</table>
<div class="Indentation"></div>
<table cellpadding="5" class="TestGroupHeadingBackground">
<tbody>
<tr>
<td>
<big class="Heading3">XXX</big>
</td>
</tr>
</tbody>
</table>
<div class="Indentation">
<p>Report is based on data obtained from comparing files XXX and XXX in folder USA.</p>
</div>
<div class="Indentation"></div>
<div class="Indentation">
<table cellpadding="5" class="ResultTable">
<tbody>
<tr>
<th class="TableHeadingCell" width="4%">Block ID</th>
<th class="TableHeadingCell" width="4%">Block Address</th>
<th class="TableHeadingCell" width="10%">Block Name</th>
<th class="TableHeadingCell" width="10%">Parameter Name</th>
<th class="TableHeadingCell" width="4%">Size</th>
<th class="TableHeadingCell" width="auto">Old Data</th>
<th class="TableHeadingCell" width="auto">New Data</th>
<th class="TableHeadingCell" width="8%">Result</th>
</tr>
<tr>
<td style="vertical-align: middle;" class="NumberCell">3</td>
<td style="vertical-align: middle;" class="NumberCell">0x03000100</td>
<td style="vertical-align: middle;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="NumberCell">4 Bytes</td>
<td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="WarningCell">Value Changed</td>
</tr>
<tr>
<td style="vertical-align: middle;" class="NumberCell">5</td>
<td style="vertical-align: middle;" class="NumberCell">0x03000300</td>
<td style="vertical-align: middle;" class="DefaultCell">Fbl_Global</td>
<td style="vertical-align: middle;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="NumberCell">4 Bytes</td>
<td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="WarningCell">Value Changed</td>
</tr>
<tr>
<td style="vertical-align: middle;" class="NumberCell">45</td>
<td style="vertical-align: middle;" class="NumberCell">0x03002F00</td>
<td style="vertical-align: middle;" class="DefaultCell">ProdData</td>
<td style="vertical-align: middle;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="NumberCell">5 Bytes</td>
<td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="WarningCell">Value Changed</td>
</tr>
</tbody>
</table>
</div>
<table cellpadding="5" class="SubHeadingTable">
<tbody>
<tr>
<td>
<big class="Heading2">End of Report</big>
</td>
</tr>
</tbody>
</table>
<div class="Heading4" style="text-align=right;">Author: XXX</div>
EDIT
Note i had to remove some of the markup so i can post the edit, it was exceeding the limit.
// we get the header height then apply it as marginTop to
// .mid-container
// removed the .sticky + .mid-container{} styling
// because we don't know the height of the header
// so we can't hard code it.
window.onscroll = function() {
myFunction()
};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
// i figured it should be '>='
if (window.pageYOffset >= sticky) {
header.classList.add("sticky");
document.querySelector('.mid-container').style.marginTop = header.getBoundingClientRect().height + "px";
} else {
header.classList.remove("sticky");
document.querySelector('.mid-container').style.marginTop = "0px";
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(59, 75, 84);
font-family: arial, verdana, trebuchet, officina, sans-serif;
margin: 1;
}
.top-container {
background-color: #f1f1f1;
padding: 1px;
text-align: center;
}
.mid-container {
background-color: rgb(38, 52, 63);
padding: 1px;
text-align: left;
}
.header {
text-align: center;
padding: 5px 8px;
background: rgb(25, 165, 88);
color: #f1f1f1;
position: relative;
margin: 1;
z-index: 100;
/* For refrence */
height: 300px;
}
.mid-container {
padding: 1px;
}
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.sticky+.mid-container {
margin-top: 39px;
overflow: auto;
}
table {
margin-bottom: 10px;
vertical-align: top;
border: 0;
border-spacing: 1px;
padding: 2px;
}
.HeadingTable {
width: 100%;
text-align: center;
margin-top: 15px;
margin-bottom: 30px;
margin-left: auto;
margin-right: auto;
background-color: rgb(220, 221, 222);
}
.SubHeadingTable {
width: 100%;
text-align: center;
margin-top: 15px;
margin-bottom: 25px;
background-color: rgb(220, 221, 222);
}
.ResultTable {
width: 100%;
text-align: left;
padding-right: 20px;
}
table.ResultTable td {
vertical-align: top;
}
.OverallResultTable {
width: 50%;
text-align: center;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
font-weight: bold;
}
.TableHeadingCell {
background-color: rgb(179, 179, 179);
font-family: arial, verdana, trebuchet, officina, sans-serif;
font-weight: bold;
text-align: center;
}
.CellNoColor {
text-align: left;
vertical-align: top;
}
.DefaultCell {
background-color: rgb(229, 229, 229);
text-align: left;
}
.NumberCell {
background-color: rgb(229, 229, 229);
text-align: center;
min-width: 50px;
}
.PositiveResultCell {
text-align: center;
background-color: rgb(25, 165, 88);
}
.NegativeResultCell {
text-align: center;
background-color: rgb(240, 0, 0);
}
.WarningCell {
text-align: center;
background-color: rgb(255, 255, 0);
}
.NegativeResult {
background-color: rgb(240, 0, 0);
text-align: center;
font-weight: bold;
}
.PositiveResult {
background-color: rgb(25, 165, 88);
text-align: center;
font-weight: bold;
}
.Heading1 {
font-family: arial, sans-serif;
font-weight: bold;
font-size: 26px;
}
.Heading2 {
font-family: arial, sans-serif;
font-weight: bold;
font-size: 20px;
}
.Heading3 {
font-family: arial, sans-serif;
font-weight: bold;
font-size: 18px;
margin-bottom: 20px;
margin-top: 20px;
}
.Heading4 {
font-family: arial, sans-serif;
font-weight: bold;
font-size: 16px;
margin-top: 10px;
margin-bottom: 10px;
}
.Heading5 {
font-family: arial, sans-serif;
font-weight: bold;
font-size: 14px;
margin-top: 8px;
margin-bottom: 8px;
}
p {
Margin-bottom: 20px;
}
.TestGroupHeadingBackground {
background-color: rgb(179, 179, 179);
}
.Indentation {
margin-left: 20px;
}
<div class="top-container">
<h1>NVM Memory Comparision Report</h1>
</div>
<div class="header" id="myHeader">
<h2>Overall Report Passed</h2>
</div>
<div class="mid-container" style="margin-top: 0px;">
<h3>General Information</h3>
</div>
<div class="Heading4">Test Setup</div>
<div class="Indentation">
<table cellpadding="10">
<tbody>
<tr>
<td class="CellNoColor">Report Generation: </td>
<td class="CellNoColor">Success</td>
</tr>
<tr>
<td class="CellNoColor">File's Root Path: </td>
<td class="CellNoColor">New XXX Path: XXX</td>
</tr>
<tr>
<td class="CellNoColor">Configuration Comment: </td>
<td class="CellNoColor">XXX</td>
</tr>
<tr>
<td class="CellNoColor">XXX: </td>
<td class="CellNoColor">XXX</td>
</tr>
</tbody>
</table>
</div>
<div class="Heading4">Blocks Present in DataConfig</div>
<div class="Heading5">New Version:0042</div>
<div class="Indentation" style="float: none;">
<table cellpadding="5" width="70%">
<tbody>
<tr>
<th class="TableHeadingCell" width="18%">Dataset Name</th>
<th class="TableHeadingCell" width="12%" text-align:center;="">SparePart Number</th>
<th class="TableHeadingCell">Blocks Present</th>
<th class="TableHeadingCell" width="10%">Result</th>
</tr>
<tr>
<td class="TableHeadingCell">All Datasets</td>
<td class="DefaultCell" style="t" ext-align:center;="">All Sparepart Numbers</td>
<td class="DefaultCell"> Blocks 81, 99, 115, 120, 121, 133</td>
<td class="PositiveResult">Pass</td>
</tr>
</tbody>
</table>
</div>
<div class="Heading5">Old Version:0041</div>
<div class="Indentation" style="float: none;">
<table cellpadding="5" width="70%">
<tbody>
<tr>
<th class="TableHeadingCell" width="18%">Dataset Name</th>
<th class="TableHeadingCell" width="12%" text-align:center;="">SparePart Number</th>
<th class="TableHeadingCell">Blocks Present</th>
<th class="TableHeadingCell" width="10%">Result</th>
</tr>
<tr>
<td class="TableHeadingCell">All Datasets</td>
<td class="DefaultCell" style="t" ext-align:center;="">All Sparepart Numbers</td>
<td class="DefaultCell"> Blocks 81, 99, 115</td>
<td class="PositiveResult">Pass</td>
</tr>
</tbody>
</table>
</div>
<table cellpadding="5" class="SubHeadingTable">
<tbody>
<tr>
<td>
<big class="Heading2">Detailed Comparision Between FEE DUMPs</big>
</td>
</tr>
</tbody>
</table>
<div class="Indentation"></div>
<table cellpadding="5" class="TestGroupHeadingBackground">
<tbody>
<tr>
<td>
<big class="Heading3">XXX</big>
</td>
</tr>
</tbody>
</table>
<div class="Indentation">
<p>Report is based on data obtained from comparing files XXX and XXX in folder USA.</p>
</div>
<div class="Indentation"></div>
<div class="Indentation">
<table cellpadding="5" class="ResultTable">
<tbody>
<tr>
<th class="TableHeadingCell" width="4%">Block ID</th>
<th class="TableHeadingCell" width="4%">Block Address</th>
<th class="TableHeadingCell" width="10%">Block Name</th>
<th class="TableHeadingCell" width="10%">Parameter Name</th>
<th class="TableHeadingCell" width="4%">Size</th>
<th class="TableHeadingCell" width="auto">Old Data</th>
<th class="TableHeadingCell" width="auto">New Data</th>
<th class="TableHeadingCell" width="8%">Result</th>
</tr>
<tr>
<td style="vertical-align: middle;" class="NumberCell">3</td>
<td style="vertical-align: middle;" class="NumberCell">0x03000100</td>
<td style="vertical-align: middle;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="NumberCell">4 Bytes</td>
<td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="WarningCell">Value Changed</td>
</tr>
<tr>
<td style="vertical-align: middle;" class="NumberCell">5</td>
<td style="vertical-align: middle;" class="NumberCell">0x03000300</td>
<td style="vertical-align: middle;" class="DefaultCell">Fbl_Global</td>
<td style="vertical-align: middle;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="NumberCell">4 Bytes</td>
<td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="WarningCell">Value Changed</td>
</tr>
<tr>
<td style="vertical-align: middle;" class="NumberCell">45</td>
<td style="vertical-align: middle;" class="NumberCell">0x03002F00</td>
<td style="vertical-align: middle;" class="DefaultCell">ProdData</td>
<td style="vertical-align: middle;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="NumberCell">5 Bytes</td>
<td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;font-family: Consolas,Monaco,Lucida Console,Courier New, monospace;" class="DefaultCell">XXX</td>
<td style="vertical-align: middle;" class="WarningCell">Value Changed</td>
</tr>
</tbody>
</table>
</div>
<table cellpadding="5" class="SubHeadingTable">
<tbody>
<tr>
<td>
<big class="Heading2">End of Report</big>
</td>
</tr>
</tbody>
</table>
<div class="Heading4" style="text-align=right;">Author: XXX</div>

What is the correct way to use slimscroll on a bootstrap table?

I am trying to use slim scroll on an HTML table but I am not getting any scrolling at all. Here are the codes that I tried.:-
The table code:-
<div class"container">
<div class="row">
<div class="col-md-8">
<div class="scrolltable">
<table class="table table-striped table-bordered text-center table-condensed"> <thead>
<tr style="height: 83px;">
<th style="width: 249px; height: 83px;"> STUDENT-ID</th>
<th style="width: 34px; height: 83px;"> S.NO</th>
<th style="width: 198px; height: 83px;"> STUDENT NAME</th>
</tr>
</thead>
<tbody id="bodyer">
<tr style="height: 23px;">
<td style="width: 249px; height: 23px;">15-14-065</td>
<td style="width: 34px; height: 23px;">1</td>
<td style="width: 198px; height: 23px;">Anisul Islam</td>
<td style="width: 11px; height: 23px;">L</td>
<td style="width: 11px; height: 23px;">U</td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 12px; height: 23px;"> </td>
<td style="width: 12px; height: 23px;"> </td>
<td style="width: 12px; height: 23px;"> </td>
<td style="width: 13px; height: 23px;"> </td>
<td style="width: 13px; height: 23px;"> </td>
</tr>
<tr style="height: 23px;">
<td style="width: 249px; height: 23px;"> </td>
<td style="width: 34px; height: 23px;"> </td>
<td style="width: 198px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 12px; height: 23px;"> </td>
<td style="width: 12px; height: 23px;"> </td>
<td style="width: 12px; height: 23px;"> </td>
<td style="width: 13px; height: 23px;"> </td>
<td style="width: 13px; height: 23px;"> </td>
</tr>
<tr style="height: 23px;">
<td style="width: 249px; height: 23px;"> </td>
<td style="width: 34px; height: 23px;"> </td>
<td style="width: 198px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 11px; height: 23px;"> </td>
<td style="width: 12px; height: 23px;"> </td>
<td style="width: 12px; height: 23px;"> </td>
<td style="width: 12px; height: 23px;"> </td>
<td style="width: 13px; height: 23px;"> </td>
<td style="width: 13px; height: 23px;"> </td>
</tr>
</tbody>
</table></div></div></div></div>
I read the answers from here :-
Custom scrollbar for Bootstrap Table
but this doesn't seem to help.
here's the javascript , where I am trying to use slim scroll for the table:-
<script>
$(function(){
$('.scrolltable').slimScroll({
height: '50px'
});
});
</script>
and I also tried this :-
<script>
$(function(){
$('#bodyer').slimScroll({
height: '50px'
});
});
</script>

Your script doesn't work for two reason :
1) You need to add the following properties in the "table" tag :
data-toggle="table" data-height="299"
in this way :
<table class="table table-striped table-bordered text-center table-condensed" data-toggle="table" data-cache="false" data-height="299">
2) You must have the same number of column in your "thead" tag and in all the following "tr" tag. In your example, I count 3 columns in the first row of your table - the "Thead" tags - and 25 columns in the following rows - the "td" tags of each "tr" tag -
Here is a working example with your data.
Note : I tried the "colspan" property but it didn't work with the Slimscroll library. I had to add more "theads" tags in the first row
Note : the following Javascript script works well :
$(document).ready(function () {
$('.fixed-table-body').slimScroll({});
});

Categories