th and td not getting same width - javascript

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>

Related

CSS on hover effect on a <td> does not wok properly

I would like to make a dropdown list within every td of a table, something like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #04AA6D;
color: black;
padding: 16px;
font-size: 16px;
border: 2px solid #ccc;
}
.btncritical {
background-color: #fc0303;
color: black;
padding: 16px;
font-size: 16px;
border: none;
border: 2px solid #ccc;
}
.btnheigh {
background-color: #fc7703;
color: black;
padding: 16px;
font-size: 16px;
border: 2px solid #ccc;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">+ operator:0.20.1</button>
<button class="btncritical">critical: 2</button>
<button class="btnheigh">heigh: 1</button>
<div class="dropdown-content">
<table style="width:100%">
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</div>
</div> <br>
<div class="dropdown">
<button class="dropbtn">+ operator:0.20.1</button>
<button class="btncritical">critical: 2</button>
<button class="btnheigh">heigh: 1</button>
<div class="dropdown-content">
<table style="width:100%">
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Which works perfectly. However, because I will generate the content automatically (the first cell) I would like the dropbtn buttons to have constant width. I thought I could put it in another table, however, it seems that hovering stopped working:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #04AA6D;
color: black;
padding: 16px;
font-size: 16px;
border: 2px solid #ccc;
}
.btncritical {
background-color: #fc0303;
color: black;
padding: 16px;
font-size: 16px;
border: none;
border: 2px solid #ccc;
}
.btnheigh {
background-color: #fc7703;
color: black;
padding: 16px;
font-size: 16px;
border: 2px solid #ccc;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="dropdown">
<table>
<tr>
<td style="width: 100%"><button class="dropbtn">+ clickhouse-operator:0.20.1</button></td>
<td style="width: 100%"><button class="btncritical">critical: 2</button></td>
<td style="width: 100%"><button class="btnheigh">heigh: 1</button></td>
<td>
<div class="dropdown-content">
<table style="width:100%">
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style="width: 100%"><button class="dropbtn">+ clickhouse-operator:0.20.1</button></td>
<td style="width: 100%"><button class="btncritical">critical: 2</button></td>
<td style="width: 100%"><button class="btnheigh">heigh: 1</button></td>
<td>
<div class="dropdown-content">
<table style="width:100%">
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</table>
</body>
</html>
How to solve this? Thanks!

Your first example has two dropdown elements. Your second only has one. So of course both dropdown-content elements will appear on a hover. I think you don't want that.
I put the grey abspos table after the button in the first cell instead of the last cell, so that it doesn't show up far to the right.
I made each row be class="dropdown" so that hovering anywhere in the row will trigger display:block for that particular row's grey table.
Made the left-most buttons have width:100% so that they'd be the same width even with different content.
edit: Gave buttons height:100% and gave td a definite height so that the buttons' % height can be resolved.
Added script to make the abspos table have the same width as the parent table. See comment below. edit: abspos table now gets its width from width:100% and making tr be the relpos container.
.dropbtn {
background-color: #04AA6D;
color: black;
padding: 16px;
font-size: 16px;
border: 2px solid #ccc;
width: 100%;
}
.btncritical {
background-color: #fc0303;
color: black;
padding: 16px;
font-size: 16px;
border: none;
border: 2px solid #ccc;
}
.btnheigh {
background-color: #fc7703;
color: black;
padding: 16px;
font-size: 16px;
border: 2px solid #ccc;
}
button {
height: 100%;
}
td {
/* Cell apparently has to have a definite height, even if it is ignored, to resolve a child's % height. */
height: 10px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
/* This width: 100% resolves off the relpos containing block, which is the tr.dropdown. */
width: 100%;
}
.dropdown {
position: relative;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<table id="bigtable">
<tr class="dropdown">
<td><button class="dropbtn">+ clickhouse-operator:0.20.1</button>
<div class="dropdown-content">
<table style="width:100%">
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>some very very long country name</td>
</tr>
</table>
</div>
</td>
<td><button class="btncritical">critical: 2</button></td>
<td><button class="btnheigh">heigh: 1</button></td>
</tr>
<tr class="dropdown">
<td><button class="dropbtn">+ clickhouse-operator:0.20.1 longer</button>
<div class="dropdown-content">
<table style="width:100%">
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</div>
</td>
<td><button class="btncritical">critical: 2</button></td>
<td><button class="btnheigh">heigh: 1</button></td>
</tr>
</table>

Without touching your CSS, I tried to re-create what you wanted in this fiddle and think I was successful by shifting where your dropdown element is; ie: I created a new tr element and stored the dropdown div in a td element with a colspan of 3 (to match the prior tr's size) - here's a working example by editing your HTML (but keep the same CSS).
Working example in JSFiddle:
https://jsfiddle.net/ilanpatao/5zytep0b/12/
Updated HTML:
<div class="dropdown">
<table>
<tr>
<td style="width: 100%"><button class="dropbtn">+ clickhouse-operator:0.20.1</button></td>
<td style="width: 100%"><button class="btncritical">critical: 2</button></td>
<td style="width: 100%"><button class="btnheigh">heigh: 1</button></td>
</tr>
<tr>
<td colspan=3>
<div class="dropdown-content">
<table style="width:100%">
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style="width: 100%"><button class="dropbtn">+ clickhouse-operator:0.20.1</button></td>
<td style="width: 100%"><button class="btncritical">critical: 2</button></td>
<td style="width: 100%"><button class="btnheigh">heigh: 1</button></td>
</tr>
<tr>
<td colspan=3>
<div class="dropdown-content">
<table style="width:100%">
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
This might be able to point you in the right direction with a little finessing/tweaking;

Vertical scroll not working for table

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.

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>

how i can fix a table header when scroll

My table thead have 2 tr with diferents colspan and rowspan like this following picture:
<table id="header-fixed">
<thead>
<tr id="tr1" role="row" style="background-color: rgb(204, 9, 47);">
<th rowspan="2" colspan="1">Unidade</th>
<th rowspan="1" colspan="1">Orçado</th>
<th rowspan="1" colspan="1">Realizado</th>
<th rowspan="1" colspan="3">Atingimento no Resultado - Variação</th>
</tr>
<tr id="tr2" role="row" style="background-color: rgb(204, 9, 47);">
<th rowspan="1" colspan="1">Resultado</th>
<th rowspan="1" colspan="1">Resultado</th>
<th rowspan="1" colspan="1">Variação</th>
<th rowspan="1" colspan="1">%</th>
<th rowspan="1" colspan="1">Ating.</th>
</tr>
</thead>
...
</table>
I need fix the header of this table when scrolling, so, i found this code:
https://stackoverflow.com/a/4709775/8032896
This code almost work, when I scroll, the header is fixed, but column width is misfit like this picture.
Can someone help me?

try this example
td {
border-bottom: 1px solid #ccc;
padding: 5px;
text-align: left; /* IE */
}
td + td {
border-left: 1px solid #ccc;
}
th {
padding: 0 5px;
text-align: left; /* IE */
}
.header-background {
border-bottom: 1px solid black;
}
/* above this is decorative, not part of the test */
.fixed-table-container {
width: 50%;
height: 200px;
border: 1px solid black;
margin: 10px auto;
background-color: white;
/* above is decorative or flexible */
position: relative; /* could be absolute or relative */
padding-top: 30px; /* height of header */
}
.fixed-table-container-inner {
overflow-x: hidden;
overflow-y: auto;
height: 100%;
}
.header-background {
background-color: #D5ECFF;
height: 30px; /* height of header */
position: absolute;
top: 0;
right: 0;
left: 0;
}
table {
background-color: white;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.th-inner {
position: absolute;
top: 0;
line-height: 30px; /* height of header */
text-align: left;
border-left: 1px solid black;
padding-left: 5px;
margin-left: -5px;
}
.first .th-inner {
border-left: none;
padding-left: 6px;
}
/* for complex headers */
.complex.fixed-table-container {
padding-top: 60px; /* height of header */
overflow-x: hidden; /* for border */
}
.complex .header-background {
height: 60px;
}
.complex-top .th-inner {
border-bottom: 1px solid black;
width: 100%
}
.complex-bottom .th-inner {
top: 30px;
width: 100%
}
.complex-top .third .th-inner { /* double row cell */
height: 60px;
border-bottom: none;
background-color: #D5ECFF;
}
<div class="fixed-table-container complex">
<div class="header-background"> </div>
<div class="fixed-table-container-inner">
<table cellspacing="0">
<thead>
<tr class="complex-top">
<th class="first" colspan="2">
<div class="th-inner">First and Second</div>
</th>
<th class="third" rowspan="2">
<div class="th-inner">Third</div>
</th>
</tr>
<tr class="complex-bottom">
<th class="first">
<div class="th-inner">First</div>
</th>
<th class="second">
<div class="th-inner">Second</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>First</td>
<td>First</td>
<td>First</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>Last</td>
<td>Last</td>
<td>Last</td>
</tr>
</tbody>
</table>
</div>
</div>

Tooltip window changing height and width when more text is added

i tried to make this tooltip dynamic with the text (so when there is less text - smaller window) but it didn't work for me. I need this tooltip to change size of itself when more text is added and shrink itself when there is only a few words. Example in Jsfiddle.
PS: I don't like to use JS, but if it's necessary I can live with that.
JsFiddle: https://jsfiddle.net/d4m5hj6f/
.content {
position: static;
}
.header {
text-align: center;
position: relative;
margin-top: 40px;
}
th, td {
border:1px solid black;
overflow: hidden;
}
th {
background-color: #eff0f0;
}
td {
background-color: #eed6b1;
height: 45px;
}
tr:nth-child(even) td {
background-color: #FFF1E1;
}
table {
table-layout: fixed;
min-width: 2000px;
border-collapse: collapse;
width: 100%;
margin-left: 5px;
}
.DZ {
text-align: center;
}
tr:hover td {
background-color: #ccc;
}
tr:nth-child(even) {
background-color: #e5e5e5;
}
tr td {
border-right: 1px solid #a5a5a5;
}
.Bezborder {
border-right: 1px solid black;
}
.ht:hover .tooltip {
display: block;
}
.tooltip {
position:absolute;
display: none;
background-color: #fafbb8;
border: 1px solid black;
border-radius: 4px;
margin-left: 28px;
padding: 10px;
position:absolute;
z-index: 1000;
width: 680px;
height: 50px;
font-weight: bold;
}
<div class="content">
<div class="header">
</div>
<a name="172016">
<!--1. riadok H-->
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<th width="50px">C. u.</th>
<th width="30px">Zobrazit</th>
<th width="30px">Typ</th>
<th width="220px">Look here ---></th>
<th width="650px">hover Under this</th>
<th width="130px">System</th>
<th width="100px">Dopad/Symptom</th>
<th width="100px">Dátum zadania</th>
<th width="100px">Dátum vzniku</th>
<th width="100px">Datum Verifikacie</th>
<th width="80px">Ukoncenie</th>
<th width="100px">Dátum</th>
</tr>
<!--2. riadok D-->
<tr>
<td style="text-align:center">100</td>
<td style="text-align:center">X</td>
<td style="text-align:center">C </td>
<td>DOBRIKOVA/DURACKA</td>
<td class="ht"> Gefco PC nasa siet CD vs finalne riesenie internet gefco pc CORAIL <span class="tooltip">Tooltip windows need to change with text, more text - larger window, less text = smaller windows.</span></td>
<td>CORAIL/CONSO</td>
<td></td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td style="text-align:center">OK</td>
<td class="Bezborder" style="text-align:center">07/07/2016</td>
</tr>
<!--3. riadok D-->
<tr>
<td style="text-align:center">101</td>
<td style="text-align:center">X</td>
<td style="text-align:center">C </td>
<td>DOBRIKOVA/DURACKOVA</td>
<td class="ht"> Gefco PC nasa siet CD vs finalne riesenie internet gefco pc CORAIL <span class="tooltip">You see there is a big tooltip window space under this.</span></td>
<td>CORAIL/CONSO</td>
<td></td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td style="text-align:center">OK</td>
<td class="Bezborder" style="text-align:center">07/07/2016</td>
</tr>
</table>
</a>
</div>

Removing the width property from the tooltip css should work. Remove the height too if you want it to adapt when resizing the window.

Are you trying to achieved something like this
.content {
position: static;
}
.header {
text-align: center;
position: relative;
margin-top: 40px;
}
th, td{
border:1px solid black;
overflow: hidden;
}
th{
background-color: #eff0f0;
}
td{
background-color: #eed6b1;
height: 45px;
}
tr:nth-child(even) td {
background-color: #FFF1E1;
}
table{
table-layout: fixed;
min-width: 2000px;
border-collapse: collapse;
width: 100%;
margin-left: 5px;
}
.DZ {
text-align: center;
}
tr:hover td{
background-color: #ccc;
}
tr:nth-child(even) {
background-color: #e5e5e5;
}
tr td{
border-right: 1px solid #a5a5a5;
}
.Bezborder {
border-right: 1px solid black;
}
.ht:hover .tooltip {
display: block;
}
.tooltip {
position:absolute;
display: none;
background-color: #fafbb8;
border: 1px solid black;
border-radius: 4px;
margin-left: 28px;
padding: 10px;
position:absolute;
z-index: 1000;
width: 680px;
/* height: 50px;*/
font-weight: bold;
}
<div class="content">
<div class="header">
</div>
<a name="172016">
<!--1. riadok H-->
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<th width="50px">C. u.</th>
<th width="30px">Zobrazit</th>
<th width="30px">Typ</th>
<th width="220px">Cislo/Meno</th>
<th width="650px">Popis</th>
<th width="130px">System</th>
<th width="100px">Dopad/Symptom</th>
<th width="100px">Dátum zadania</th>
<th width="100px">Dátum vzniku</th>
<th width="100px">Datum Verifikacie</th>
<th width="80px">Ukoncenie</th>
<th width="100px">Dátum</th>
</tr>
<!--2. riadok D-->
<tr>
<td style="text-align:center">100</td>
<td style="text-align:center">X</td>
<td style="text-align:center">C </td>
<td>DOBRIKOVA/DURACKA</td>
<td class="ht"> Gefco PC nasa siet CD vs finalne riesenie internet gefco pc CORAIL <span class="tooltip">ked sa vytvara uplne novu hypotheza tak nefunguje vyber tlaciarni a globalny export tiez NOK (nepouzivame)</span></td>
<td>CORAIL/CONSO</td>
<td></td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td style="text-align:center">OK</td>
<td class="Bezborder" style="text-align:center">07/07/2016</td>
</tr>
<!--3. riadok D-->
<tr>
<td style="text-align:center">101</td>
<td style="text-align:center">X</td>
<td style="text-align:center">C </td>
<td>DOBRIKOVA/DURACKOVA</td>
<td class="ht"> Gefco PC nasa siet CD vs finalne riesenie internet gefco pc CORAIL <span class="tooltip">ked sa vytvara uplne novu hypotheza tak nefunguje vyber tlaciarni a globalny export tiez NOK (nepouzivame)</span></td>
<td>CORAIL/CONSO</td>
<td></td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td style="text-align:center">OK</td>
<td class="Bezborder" style="text-align:center">07/07/2016</td>
</tr>

In your code you have a fix value for your tooltip width and height.
If you need to make the toolip width and height adjusted dynamically by its content you should remove the width and height value.
Edit based on your comment.
If you need to keep some space between the tooltip and your view port you can use margin property, this will allow some space on each d side of your tooltip.
Try to comment out as in the follow example:
https://jsfiddle.net/d4m5hj6f/6/
.tooltip {
position:absolute;
display: none;
background-color: #fafbb8;
border: 1px solid black;
border-radius: 4px;
margin: 28px;
padding: 10px;
position:absolute;
z-index: 1000;
/*width: 680px;*/
/*height: 50px;*/
font-weight: bold;
}

Categories