Is there some (easy and sane) way to get the table headers to "stick at the top" when scrolling down a table, and "vertical highlight"?

I have a HTML table:

<table>
<thead>
    <th>Whatever</th>
</thead>
<tbody>
    <tr><td>data 1</td></tr>
    <tr><td>data 2</td></tr>
    <tr><td>data 2</td></tr>
    [...]
    <tr><td>data 10000</td></tr>
</tbody>
</table>

When scrolling down, the table header no longer shows, so I have no idea what the columns mean. I want them to "stick to the top" of the screen as I scroll down enough for them to go out of the visible view. I'm sure you understand exactly what I mean. This is in fact such a common problem for me, for example on Wikipedia, that it boggles my mind that this isn't just "solved in CSS", but actually part of how browsers work since many years. I don't understand who would ever not want this behaviour, or how you are supposed to read long tables without this simple yet extremely useful feature.

Very much related, I also haven't been able to find any way to easily make a "vertical highlight", that is, when you hover over a table cell, it not only "lights up" (:hover with a background-color) the specific cell/row, but also the entire "stack" above and underneath that cell as well. Vertical hover highlight.

All I find are ugly, messy JavaScript hacks for both of these things. Why aren't they simple CSS properties? Or are they? I probably only know like 1% of the entire CSS language after attempting to learn it for 20 years...