My goal was to create a table using divs with fixed headers while scrolling vertically. However, I encountered an issue where the header width seemed to shrink and became misaligned with the rows. Even setting the width to 100% did not resolve this problem.
.grid-wrapper {
position: relative;
}
.grid {
background-color: #fff;
overflow: auto;
margin-top: 70px;
height: 60%;
}
.gridHeader {
display: table-header-group;
position: absolute;
top: -50px;
z-index: 2;
}
.gridHeader .gridCell {
font-weight: bold;
color: #334D5C;
text-decoration: none;
}
.gridBody {
display: table-row-group;
}
.gridRow {
display: table-row;
background-color: #fff;
min-height: 50px;
line-height: 30px;
}
.gridRow:hover {
color: #45B29D;
}
.gridCell {
display: table-cell;
width: calc(100% / 7);
padding: 10px;
text-align: center;
word-break: break-all;
border-width: 0px 0px 1px 0px;
border-color: #d2d7dc;
border-style: solid;
}