I have a table with first column fixed so when the next column is scrolled first column item will always display, Now the problem is first column width have fixed value and the same is applying on the margin left, How can we make fluid width instead of fixed width so it resizes based on the column?
.table-main {
border: none;
border-right: solid 1px rgb(75, 90, 102);
border-collapse: separate;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.table-main thead th {
background-color: rgb(203, 220, 233);
border: none;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.table-main tbody td {
border-bottom: solid 1px rgb(75, 90, 102);
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.table {
position: relative;
}
.table-scroll {
margin-left: 131px; /*HOW TO HAVE THIS in Eqaul SIZE??*/
overflow-x: scroll;
overflow-y: visible;
padding-bottom: 5px;
width: 500px;
}
.table-main .fix-col {
border-left: solid 1px rgb(75, 90, 102);
border-right: solid 1px rgb(75, 90, 102);
left: 0;
position: absolute;
top: auto;
width: 110px; /*HOW TO HAVE THIS in Eqaul SIZE??*/
}
<div class="table">
<div class="table-scroll">
<table class="table-main">
<thead>
<tr>
<th class="fix-col">Name</th>
<th>Designation</th>
<th>Experience</th>
<th>Technology</th>
<th>Company</th>
<th>Location</th>
<th>Contact No.</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fix-col">Bob</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
<tr>
<td class="fix-col">Bob</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
<tr>
<td class="fix-col">Bob</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
<tr>
<td class="fix-col">Bob</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
<tr>
<td class="fix-col">Bob</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
</tbody>
</table>
</div>
</div>
What about using javascript to calculate and set the width of the fixed column(.fix-col) and the margin-left of the container div(.table-scroll)?
var columns = document.querySelectorAll('.fix-col');
var maxWidth = 0;
/* Loop through columns to get the widest one */
for (var i = 0; i < columns.length; i++) {
/* Get only the width, without any paddings */
var w = parseFloat(window.getComputedStyle(columns[i]).getPropertyValue('width'));
if (w > maxWidth) {
maxWidth = w;
}
}
/* Second loop to set the width */
for (var i = 0; i < columns.length; i++) {
columns[i].style.width = maxWidth + 'px';
}
/* And finally update the margin of the wrapping div */
var paddingPlusBorder = 21;
document.querySelector('.table-scroll').style.marginLeft = maxWidth + paddingPlusBorder + 'px';
.table-main {
border: none;
border-right: solid 1px rgb(75, 90, 102);
border-collapse: separate;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.table-main thead th {
background-color: rgb(203, 220, 233);
border: none;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.table-main tbody td {
border-bottom: solid 1px rgb(75, 90, 102);
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.table {
position: relative;
}
.table-scroll {
overflow-x: scroll;
overflow-y: visible;
padding-bottom: 5px;
width: 500px;
}
.table-main .fix-col {
border-left: solid 1px rgb(75, 90, 102);
border-right: solid 1px rgb(75, 90, 102);
left: 0;
position: absolute;
top: auto;
}
<div class="table">
<div class="table-scroll">
<table class="table-main" id="my-table">
<thead>
<tr>
<th class="fix-col">Name</th>
<th>Designation</th>
<th>Experience</th>
<th>Technology</th>
<th>Company</th>
<th>Location</th>
<th>Contact No.</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fix-col">Some very long name</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
<tr>
<td class="fix-col">LooooooooooongNameeee</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
<tr>
<td class="fix-col">Bob</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
</tbody>
</table>
</div>
</div>
And if you want to support older IE versions you can use a custom function to get the column widths instead of using window.getComputedStyle(columns[i]).getPropertyValue('width').
function getWidth(element) {
if (getComputedStyle in window) {
return window.getComputedStyle(element).getPropertyValue('width');
}
if (currentStyle in element) {
return element.currentStyle.width;
}
var defaultWidthIfNoSupport = '100px';
return defaultWidthIfNoSupport;
}
You could use position: sticky Sticky Element in order to anchor to left the fixed column:
.fix-col {
position: sticky;
position: -webkit-sticky;
background-color: white; // <-- By default it's transparent
}
<table>
<tr>
<th class="fix-col">Name</th>
see the code applied to your snippet:
.table-main {
border: none;
border-right: solid 1px rgb(75, 90, 102);
border-collapse: separate;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.table-main thead th {
background-color: rgb(203, 220, 233);
border: none;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.table-main tbody td {
border-bottom: solid 1px rgb(75, 90, 102);
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.table-scroll {
overflow-x: scroll;
width: 500px;
}
.fix-col {
position: sticky;
position: -webkit-sticky;
background-color: white;
left: 0;
margin-left: 1em;
}
<div class="table">
<div class="table-scroll">
<table class="table-main">
<thead>
<tr>
<th class="fix-col">Name</th>
<th>Designation</th>
<th>Experience</th>
<th>Technology</th>
<th>Company</th>
<th>Location</th>
<th>Contact No.</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fix-col">Bob</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
<tr>
<td class="fix-col">John</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
<tr>
<td class="fix-col">Alessandro</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
<tr>
<td class="fix-col">Joseph</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
<tr>
<td class="fix-col">Mark</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
</tbody>
</table>
</div>
</div>
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>