From Wikipedia, the free encyclopedia
Content deleted Content added
Revision as of 16:23, 21 September 2025
On screens <=639px wide, sticky headers don’t work. 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 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 horizontal scroll is removed and the table extends past the main content area messing up the page layout.
- On Android browsers: sticky does not work unless you zoom all the way out, which makes the text on the entire page smaller causing readability issues.
- On iPhone browsers: no known issues.
Installation
Add the following to your common.js page (you must be logged in to use it). If you only want it for iPhone, then consider moving it to your minerva.js page:
importScript('User:Jroberson108/StickyTableHeadersFix.js'); // Backlink: [[User:Jroberson108/StickyTableHeadersFix.js]]
