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>.
**Problem:** Mixing column header with "sorttop" rows makes it impossible to target just the column headers as a whole. The [[ https://en.wikipedia.org/wiki/MediaWiki:Gadget-StickyTableHeaders.css | sticky gadget ]] and [[ https://en.wikipedia.org/wiki/Template:Sticky_header | 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.
**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 would be a good idea to also add a "sorttop" class to the <tbody> they are moved to.
Relates to [[ https://phabricator.wikimedia.org/T248936 | T248936]].