Fix column headers while scrolling horizontally
Building upon @Sethuraman 's answer, if you replace padding
with margin
and then put a border on the div wrapping table, it might solve your problem of border (not sure if this is what you're trying to address)
You can try below change:
.card-body {
flex: 1 1 auto;
padding: 0;
margin: 10px 0;
/* border: 1px solid lightgray; */ <-- You can add or remove this based on your need
}
This is before and after modifying the above class.
Furthermore, you can remove the border spacing to avoid 2px scroll gap on the th
elements while scrolling the content towards left.
.fundClassesTable[_ngcontent-xcq-c0] {
table-layout: fixed;
border-spacing: 0;
}
Please let me know if this helps or you are looking for something else.
In .card-body
instead of padding try margin it may solve your problem, i have wored on stackblitz -- https://stackblitz.com/edit/angular-d1mzew
.card-body {
flex: 1 1 auto;
/* padding: 10px; */
margin: 10px;
}
Try this by setting position:sticky
and left:-10px
.Here is the stackbliz for the same. This will meet your requirement I guess
th{
position: sticky;
left: -10px;
}