I'm struggling to understand this, as I am not very well-versed in CSS. I would consider myself more of a beginner than an expert.
The reason why I am using relative/absolute is because I am working with dynamically paginated tables from large datasets. This approach helps users navigate through the data quickly without overwhelming the client-side.
Upon closer inspection, while the table-row expands by 100%, the table-cells do not adhere to the table-layout:fixed rule. I need the cells to expand and fill all available space within the row.
(On a side note, the border-collapse: collapse property also seems to be ineffective.)
Your assistance on this matter would be greatly appreciated. Thank you in advance!
HTML
<div class="gridTable">
<div class="gridRow">
<div class="gridCell">a</div>
<div class="gridCell">JKL;</div>
<div class="gridCell">Jb</div>
</div>
</div>
CSS
.gridTable{
display:table;
table-layout:fixed;
position:relative;
border-collapse: collapse;
}
.gridHeaderRow{
top:0px;
}
.gridRow, .gridHeaderRow{
display:table-row;
position:absolute;
}
.gridCell{
display:table-cell;
}
.gridTable, .gridRow, .gridHeaderRow{
width:100%;
}
.gridTable, .gridTable *{
border-collapse:collapse;
}
.gridTable div{
border-color:black;
border-width:1px;
border-style:solid;
}