Is the appearance quite different between the two tables? I ask because I needed to do the same thing to accommodate a peculiar table on one page some years ago. It has been doing just fine that way, no ill effects. It was needed in order to keep the cell contents more distinctly separated than fiddling with classes, on resize it didn't work as one table.

Is the appearance quite different between the two tables?

No in that both tables together will appear as one. Yes in that the styling of the header column will be different as is often the case in tables (eg: darker background).
The goal of the splitting is so that on small screens the header table will remain fixed, while the data table will be horizontally scrollable. I will likely add a series of dots below the table for each column like on a typical carousel.

no ill effects.

This is what I suspected, but just wanted to be sure.

can't you do this with a <colgroup> element?

can't you do this with a <colgroup> element?

Not that I can figure out. I was unaware that <colgroup> even existed but I looked it up and messed around with it a bit, but I'm unable to make only some columns scrollable.

However this poking around made me come across this stack-exchange post:
stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-a-fixed-frozen-left-column-and-a-scrollable-b
The trick is to set the header column to position:sticky;

This simplifies things. Now all I need to implement is a swipe action and the dots and I'm good to go!