Check out my CodePen example here - Code
In this demo, I have a table inside a container where the table is larger than the container.
As you scroll horizontally, both the table and headers move accordingly.
However, when scrolling vertically, I want the headers to stick at the top while the content scrolls underneath. You can see a working version of this concept here - Code
The challenge I'm facing is maintaining the column widths and overall structure of the table when implementing sticky headers.
Do you have any suggestions on how I can achieve sticky headers without losing the width integrity of the table?
body{
background: grey;
font-family: sans-serif;
}
.page{
background: white;
width: 1200px;
margin: 0 auto;
}
.table-con{
overflow: scroll;
max-width: 1200px;
height: 500px;
}
table{
/*table-layout: fixed;*/
border-collapse: collapse;
width: 1500px;
}
thead th:first-child{
width: 20px;
padding: 0;
}
thead th{
text-align: left;
}
thead tr{
border-bottom: 1px solid #444;
}
tbody td{
border-bottom: 1px solid #aaa;
}
tbody tr:nth-child(even) td:not(:first-child){
background: yellow;
}
tbody td:first-child{
background: none;
border: none;
padding: 0;
}
th, td{
padding: 10px 5px;
&:first-of-type{
padding-left: 20px;
}
&:last-of-type{
padding-right: 20px;
}
}