I've developed a straightforward AngularJS application with multiple tables on one page. In order to add scrolling functionality, I initially used a basic CSS code snippet like:
tbody {
overflow: auto;
}
I also experimented with the https://github.com/cornflourblue/angu-fixed-header-table implementation, but it didn't quite meet my needs (which is why I opted for the simple solution).
However, the issue arises when the scroll feature works perfectly with a large number of rows in the table, but when there's only a single row, the fixed height causes unnecessary empty space. While using a plain table setup with AngularJS adjusts the height based on content dynamically, it lacks the scroll function.
My question is, what would be the most effective way to implement scrolling for a table without having excessive white space, yet still have the scroll appear after a certain number of values (let's say 15) are present in the table?