I have implemented a scrolling method within the tbody element by using the following CSS:
tbody {
display:block;
max-height:575px;
overflow-y:scroll;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
However, I am facing an issue where the fixed height setting is causing inconsistencies across different devices. Unfortunately, I do not have the time to adapt the code for each potential device. Ideally, I would like the tbody element to fill 100% of its parent while still allowing it to scroll independently. Is there a way to achieve this?
I have researched various solutions for locking headers in place while scrolling and have tried several options, but none have met my specific requirements. The code sample above is the closest I have come to what I need, although the max-height property is not working as desired.