User:Jroberson108/StickyTableHeadersFix
| Description | Makes table headers sticky on small screens for Template:Sticky header and MediaWiki:Gadget-StickyTableHeaders.css |
|---|---|
| Author | Jroberson108 |
| Status | Working |
| First released | September 21, 2025 |
| Updated | September 21, 2025 (2 months ago) |
| Skins | All except Timeless |
| Source |
On screens <=639px wide (usually mobile portrait orientation), table headers are not sticky for Template:Sticky header and MediaWiki:Gadget-StickyTableHeaders.css (enable at Special:Preferences#ooui-php-445). This is because the global CSS changes tables so they fit within the main content area and adds a horizontal scroll to wide tables. This companion script overrides those global styles so headers are sticky.
This functionality is implemented separately from the template and gadget because of the following issues:
- On Windows and Android browsers, when the table is wider than the main content area, the table's horizontal scroll is replaced with a page-level scroll, and the table extends past the main content area messing up the page layout.
- On Android browsers: on some Android devices, like the Galaxy S20 FE 5G and Galaxy S21 5G, sticky headers won't work until the user zooms out, which causes readability issues, while on others, like the Galaxy F14 5G (rebranded M14), they work correctly despite the scroll issue.
- On iOS (iPhone) browsers: no known issues.
Installation
[edit]Add the following to your common.js page (you must be logged in to use it):
importScript('User:Jroberson108/StickyTableHeadersFix.js'); // Backlink: [[User:Jroberson108/StickyTableHeadersFix.js]]