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;

}