No worries, it was fun 
Note I changed the js in my demo as it duplicated the table again in error.
Yes, that’s a downside of that approach. The only way I can think to overcome this is to have a height for the header and footer that is tall enough to allow the content in the header to wrap. Usually that would not be an issue as header content is not usually full of content like the cells. If we take that approach then you can get close to your desired outcome of a scrollbar inside the header and footer but will also display correctly on the mac where the scrollbar is overlaid when required. We have to lose the borders on the header though because as the header row is slightly longer depending on browser the borders won’t always match up exactly.
Yes, if you have very large tables then that is a downside but I would wager that they would need to be extremely large before a performance hit was noted. On the contrary all other js versions I’ve seen of fixed headers and footers are extremely ‘janky’ to start with as they have to dynamically update the headers and footers while scrolling etc.
The problem with all the pure CSS solutions is that they need to set tbody to block in order to get the vertical scrollbar on tbody but once you do that then there is no way to have a relationship between the table header and footers as they effectively become separate tables.
I do wonder if css grid can supply a solution but I’m guessing you would need nested grids in order to get the scrollbar and then you probably lose the relationship between the parent grid columns. (I’ll have to experiment when I have a few hours free :)).
Maybe @Erik_J or @ronpat have some suggestions as they always like a challenge
It may also be of interest that we ran a quiz on this about 8 years ago at Sitepoint although it was only for a fixed header but makes interesting reading all the same.