@PaulOB Glad to hear one of those functions were redundant! I'm looking into that table more closely now & was unsure about a few details.
Unfortunately for my use case, I won't know how much screen estate is available to display the table (it's handled automatically by a flex container that grows to "absorb" all space available to it) so I can't possibly assign a fixed height to it. Which brings me to a couple of questions about this:
Can the fixed
tfoot automatically assume their positions at the top & bottom, respectively, of their container? i.e., the
div container within which the table is placed.
The stretchy rows are kinda unexpected. I get why they do that but, for the purposes of displaying this table, I think each row should only be as tall as they need to be, as in the rest of your demos. If there isn't enough rows to warrant a scrollbar, then the table should either:
Show the table background in the empty space under the rows. The
tfoot should remain fixed at the top & bottom of their container despite the lack of rows.
Show the table background in the empty space under
tfoot. In essence, the
tfoot "shifts" upwards to stick under the bottom of the last row.
In both cases, the scrollbar should be hidden away from sight as it has no purpose. Personally, I'd prefer the first option because it doesn't make much sense, from a user experience perspective, to have
tfoot just a couple of rows away from
thead. Having it at the bottom of the container/page might not be of much help either but, at least, it maintains consistency whether the table is fully populated or not. Familiarly adds great value to any UI. Speaking of which, on a completely unrelated note, I find SitePoint UI/UX to be incredibly intuitive with the user's needs at the forefront above all else. I started looking into both StackOverflow & SitePoint at the same time and it's ridiculous how well SitePoint handles certain features/implementations compared to the alternative.
You probably understand what I mean but, just in case I haven't made myself clear enough, here's an image of my suggestion: on the left is the current implementation while the one on the right is my suggestion of a scrollbar with margins the same size as
tfoot. The idea being that both are positioned outside the table but the one on the right looks more closely integrated than it really is.
I think you're likely to be absolutely correct in that it would require some zany JS-magic to pull off. Although, for the sake of comparison, if we were to clone the entire table twice, perhaps it's not as process-intensive as it might seem at first to run a JS script which adjusts for resizing dynamically. But that's just me thinking aloud.
Coincidentally, I came across a jQuery plugin on GitHub which attempts to address this very issue and does commendable job of it as seen in this live demo. It even offers an optional parameter to only display a certain number of rows. However, it is of course not without its own issues (limited to one table per page is a significant one) and I think it might be verging dangerously close to the land of JS voo-doo so I wonder what's everyone here take on it.