Currently, column header rows are moved from the <tbody> to the <thead> element. After sorting, rows with the "sorttop" class are moved to the bottom of the <thead>.

Problems: Mixing column header with "sorttop" rows makes it impossible to target just the column headers as a whole. The sticky gadget and sticky header template both make the <thead> top-sticky to the page. This helps keep headers in view while scrolling through long tables. Non-header "sorttop" rows should not be top-sticky, especially on smaller screens with limited real estate. Although you can make exactly one row top-sticky with the template, this isn't ideal when you have multiple header rows, and is structurally off if the row uses "rowspan". Making multiple rows individually top-sticky isn't practical since you now have overlapping sticky elements.

In addition, mixing "sorttop" and header rows makes it difficult/impossible to use CSS to select the last row of headers excluding the "sorttop" rows since level 4 selectors aren't fully supported.
Example: thead tr:not(.sorttop):has(+ tr.sorttop) {}

Solution: Move the "sorttop" rows to a second <tbody> under the <thead>, which HTML allows multiple <tbody>. I suggest adding a "sort" class to the one that should be sorted and adjusting the jquery.tablesorter to target it. This should help future-proof against the addition of a third <tbody> under it. It might be a good idea to also add a "sorttop" class to the <tbody> they are moved to.

Relates to T248936.