Template talk:Sticky table start

Mobile visual cue for scrollable area

@Timeshifter: As mentioned in the "Column width problems" discussion above, I cannot change the iOS/iPadOS scrollbar behavior. Scrollbar visibility in WebKit is controlled by the browser and operating system, not by web page scripts or styles. It is designed to only display when actively scrolled. Browsers on Android do the same except on some devices and browsers it also temporarily displays when the scrollable content is loaded or focused on as an initial indicator.

A common solution to this discoverability problem is to add a visual cue such as a shadow at the bottom of the scrollable area, which hides when you scroll to the bottom of the table so it doesn't hinder readability of the last row. Unfortunately with Wikipedia's limitations on templates, it can't be done with pure CSS. I did however create a companion user script so that JavaScript can implement it correctly. It only runs on Minerva, the default skin used on mobile devices. It works on Android Chrome and Firefox. You can test Safari on iOS/iPadOS if you want to see if it improves your experience.

You will have to add the following to your Special:MyPage/common.js page and be logged in to use it.

See documentation at User:Jroberson108/Template:Sticky table start/ScrollCue.

Jroberson108 (talk) 15:29, 3 July 2025 (UTC)

@Jroberson108:

I added it.

See: User:Timeshifter/common.js

That is an improvement on my iphone in Firefox. Thanks. I see nothing on Firefox in ipad. Can test here:

Template:Sticky table start/doc

Need something else. I was thinking of some kind of small image or icon that could go in the front of the table caption. Or elsewhere. Such as arrowheads at the bottom of the table.

It would be put there by the template.

Something representative of scrolling. With a tooltip in the caption icon saying "Scrollable table if full table is not visible in your screen".

Since the table caption disappears upon scrolling, so would the icon, and so it would not take up valuable space.

I see some mouse movement indicator illustrations that might work in google image results.

https://images.google.com

Example searches:

scrolling symbols for tables.

symbols for vertically scrollable tables on mobile

These are royalty free:

https://www.istockphoto.com/illustrations/scroll-down

Simple stuff like those images are not copyrightable anyway. See:

c:Template:PD-ineligible

Thin arrowheads on a narrow partial blank row at the bottom of the table. That partial row would disappear upon beginning to drag the table up to see more of it. Opposite of keyboard arrowhead:

^^^^^^^^^^^

Unicode characters for various down arrowhead symbols.

https://www.google.com/search?q=Unicode+characters+for+various+down+arrowhead+symbols

c:Category:SVG down arrow icons

White arrowhead with thick black outline would work in both light and dark mode on Wikipedia. Here is a non-copyrightable example (without the watermark):

https://www.dreamstime.com/downward-pointing-triangle-vector-outline-icon-design-generative-ai-represents-down-collapse-lower-priority-direction-image381446312

I notice on my ipad on the doc page that many of the tables show partial rows at the bottom of the table. That is a clear indicator of a scrollable table.

I don't see that as often on my PC monitor.

Maybe that could be forced somehow. Some way to block integer numbers of rows showing.

--Timeshifter (talk) 23:59, 3 July 2025 (UTC)

@Timeshifter: Is your iPad using Minerva and are you logged in?

Remember that not all tables have a caption. A lot of what you are asking for is dynamic requiring JavaScript, which templates don't allow, so "It would be put there by the template." is not possible in most cases. This template cannot add a tooltip caption. It cannot add an extra table row to the bottom. It cannot make something disappear upon scrolling. CSS can only style existing elements. The template only places some markup around the table and styles that markup and the things contained in it. That's the whole reason I had to do a user script, which has its own caveats.

PC browsers have persistent scroll bars, so not sure why you feel that is not enough. Jroberson108 (talk) 00:18, 4 July 2025 (UTC)

You are right. I was just wondering why the doc tables on my PC monitor were different in not showing as many partial rows as on the ipad.

Maybe someday Mediawiki will do fully sticky tables, and be able to use Javascript. A couple of these Unicode characters could be put side-by-side at the bottom of each column whenever the table was taller than the screen:

U+2304 is Unicode for this downward arrow: ⌄

See underlying wikitext to see how to display the arrowhead.

I am logged in on the ipad. I was using Firefox. I see that MinervaNeue is a choice in preferences. I don't know if I have ever selected it. Wouldn't that also put Minerva on my PC view too? I probably wouldn't want that?

How were you able to get the enable/disable buttons on the sticky template without Javascript?

Maybe put "Scrollable table if needed" in the same spot just above the table. Height setting for table wouldn't include it since it is not part of the table.

OK. I see I can select "mobile view" at the bottom of Wikipedia pages on the ipad. And it does show the shaded partial row at the bottom of the fully sticky tables.

Unfortunately, Minerva doesn't have the floating table of contents I like in Vector 2022. --Timeshifter (talk) 01:07, 4 July 2025 (UTC)

@Timeshifter: The reason templates don't allow JavaScript is for security reasons. The enable/disable buttons used JavaScript from mw-collapsible and only required including the class, which I hackishly modified the projects styling to make it not hide the entire content. Sortable also uses JavaScript, but similarly we only have to include the class to use it, which {{sort under}} modifies its styling. Both have JavaScript added through the backend, not through templates.

There is no way to tell with pure CSS which tables are actually scrollable. It depends on the size of the screen, table, font, etc., which JavaScript can do.

Sounds like your iPad is large enough where it doesn't default to Minerva. Just curious, but do the scroll bars always show on iPad the same way it does on PC browsers using the default skin? If you change the skin to Minerva in preferences, then it would change your PC too. The user script I created is only to help a little with discoverability when the scroll bar is not initially present as an indicator, which sounds like it is only on iPhones. Unless someone includes it in their user scripts and is logged in on their phone (Minerva), it doesn't get used. Jroberson108 (talk) 01:49, 4 July 2025 (UTC)

On ipad in both Chrome and Firefox I do not see the vertical scroll bars on Wikipedia fully-sticky tables. In both desktop and mobile view. Even when I am scrolling the table up and down.

Hacking is good! If it allows you to make scrollable tables noticeable on iphones and ipads.

Iphone is default Minerva regardless of logged in or not. But, unlike the ipad, I can see a narrow scroll bar show up once I start to drag the table up or down. But not before I drag.

Same is true if I click the "desktop" link at the bottom of the iphone Wikipedia page. I can see a narrow scroll bar show up once I start to drag the table up or down. But not before I drag. I have that floating table of contents so it must be Vector 2022. --Timeshifter (talk) 02:32, 4 July 2025 (UTC)

@Timeshifter: On iPad, if you are scrolling over the content and no scroll bar shows, then it sounds like a browser/iPadOS rendering issue or quirk. The behavior of scrollbars on iPadOS is controlled by the system and should be consistent across all apps and browsers. It should work the same as it does on iPhone: appear while scrolling, and disappear otherwise. What OS version does you iPad have? Jroberson108 (talk) 03:21, 4 July 2025 (UTC)

@Timeshifter: I modified the user code to also apply to WebKit. Minerva is still included. This way iPadOS browsers and macOS Safari are also included. That being said, I shortened the import names to something broader and deleted the old pages. See the import code above to update your common.js page. Can you make sure the cue still shows on iPhone? For iPad, you shouldn't need to switch to Minerva for the cue to display. Jroberson108 (talk) 04:54, 4 July 2025 (UTC)

I have latest standard ipad 2020 OS: iPadOS 18.5

I updated the javascript.

On ipad 2020 when signed in to Wikipedia. Mobile view (Minerva): The graying at bottom of fully-sticky tables (when full table is not visible outright on screen) is seen in all browsers tested: Safari, Firefox, Chrome, Edge. Scrollbar not visible ever on fully-sticky tables in all browsers tested: Safari, Firefox, Chrome, Edge. Dragging table up or down makes no difference.

On ipad 2020 when signed in to Wikipedia. Desktop view (Vector 2022 in my preferences): Results are exactly the same as mobile view for all the browsers. Concerning scrollbar and graying.

Also need to test iphone browsers.

--Timeshifter (talk) 06:58, 4 July 2025 (UTC)

@Timeshifter: In summary, the new scroll cue works on iPad 2020 (iPadOS 18.5) in Minerva and Vector 2022 skins. The scroll bar did not display when actively scrolling. I researched some and found the following:

1. Scrollbar invisible when device in dark mode and the page uses a light theme.Bug 213394[1][2]
2. Light background colors can make scroll bar appear invisible.[3] (Note, I cannot change the scrollbar color for iOS/iPadOS.[4])
3. Connected devices (keyboard/mouse) may affect the scroll bar.[5]
4. Shrinking window or zooming in and out might trigger the scrollbar to appear.[6]

For #1, if device uses dark mode, test by changing device and Wikipedia light/dark modes. For #2, test with a table that has a white background since the wikitable background-color could be similar to the scroll bar color that is over the table's edge. For #3, disconnect devices and maybe restart. For #4, testing is already explained. Jroberson108 (talk) 14:56, 4 July 2025 (UTC)

@Timeshifter: The WebKit detection code I had was returning true for Windows browsers too, so I had to make it more specific. I've tested and the shadow only shows on Windows when Minerva skin is used and on Android that uses Minerva by default. Jroberson108 (talk) 14:34, 7 July 2025 (UTC)

Sorry. I have been busy. Hope to get around to more Wikipedia stuff. We need a pool of iphone and ipad users to test out stuff. Some kind of way to ping them too. A list of participants on some talk page section dedicated to this purpose only. Participants would all subscribe to that talk page section. Then someone in need would sign the section after leaving a link to the page, talk page, sandbox, etc. needing iphone, Mac, and ipad help. That would ping everybody. --Timeshifter (talk) 23:35, 8 July 2025 (UTC)

Iphone SE 2020: I was logged in to Wikipedia. In both mobile and desktop view: The gray area at the bottom of fully sticky tables shows up in these 4 browsers: Safari, Firefox, Chrome, Edge.

The scroll bar shows up too. But only after dragging within the table. Tapping in the table is not enough.

More later hopefully. --Timeshifter (talk) 11:03, 12 July 2025 (UTC)

Ipad 2020. Logged in: Safari in both mobile and desktop view: Scrollbar not visible in light mode. It is visible in dark mode, but only when dragging the table. Logged out: Same is true.

Ipad 2020. Logged in: Gray cueing: In Safari it is visible in both mobile and desktop views. And in both light and dark modes. --Timeshifter (talk) 06:56, 14 July 2025 (UTC)

@Timeshifter: Thanks for testing. Sounds like the shadow cue works correctly now.

The only issue you found was scrollbar on iPad light mode having a similar color to the table's background color making it look invisible (visible in dark mode). Since it also occurs logged out, then it is unrelated to the cue or any Wikipedia settings.

You could test that scenario on a table with a white background color to be sure it looks invisible and isn't missing. If it's still missing, then it may be the device and you may have to explore the other three tests I mentioned above. Jroberson108 (talk) 12:20, 14 July 2025 (UTC)

I added CSS to force white background on this table:

{| class="wikitable sortable sticky-table-head" style=background-color:white;

Tall (scroll)

Date	MoE
February 16–18	± 1.8%
February 3–6	± 1.8%
February 3–6	± 1.8%
February 3–6	± 1.8%
February 3–6	± 1.8%
February 3–6	± 1.8%
February 3–6	± 1.8%
February 3–6	± 1.8%
February 3–6	± 1.8%
February 3–6	± 1.8%
February 3–6	± 1.8%
February 3–6	± 1.8%
February 3–6	± 1.8%
February 3–6	± 1.8%
February 3–6	± 1.8%
February 3–6	± 1.8%
February 3–6	± 1.8%
February 3–6	± 1.8%
February 3–6	± 1.8%
February 3–6	± 1.8%
February 3–6	± 1.8%
February 3–6	± 1.8%
February 3–6	± 1.8%
February 3–6	± 1.8%
February 3–6	± 1.8%
February 16–18	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 16–18	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%
February 13–16	± 1.8%

This white-background table shows no scrollbar in ipad in dark mode whether logged in or not. --Timeshifter (talk) 13:11, 18 July 2025 (UTC)

@Timeshifter: So scrolling doesn't reveal scrollbar. Thanks for confirming. You'll have to debug your device with the other three tests. Jroberson108 (talk) 21:25, 18 July 2025 (UTC)

I looked back at my ipad testing, and in my skimming I don't see any tests when not signed in when viewing the tables on Template:Sticky table start.

Ipad 2020: Safari. When not logged in: I see a scrollbar in dark mode, but not light mode, when dragging the table up and down. When viewing the tables on Template:Sticky table start. That is the same as when logged in.

Still not logged in: When viewing the white background table just above in dark mode I no longer see the scrollbar. That makes sense if the scrollbar is coded white. I don't see the scrollbar in light mode either. Same as when logged in for both light and dark mode. --Timeshifter (talk) 22:38, 26 July 2025 (UTC)

Remove vertical scroll

Talk split from Template talk:Sticky header#Incompatible with overflow:auto. Jroberson108 (talk) 22:03, 18 September 2025 (UTC)

Thanks Timeshifter! I am extremely reluctant to use {{sticky table start}}, because that has the effect of making it harder to see the table, even on large screens. I guess it is a pick your poison situation... hmmm. Would it be possible to get a version of {{sticky table start}} with only the horizontal scrolling? HouseBlaster (talk • he/they) 20:07, 18 September 2025 (UTC)

@HouseBlaster and Timeshifter: This {{sticky header}} is supposed to "stick to the top of the screen", not a scrollable div. You will have issues if in a scrollable div and the sticky site header is also present. {{sticky table start}} makes it stick to the div edge. Seems like this conversation is more related to the other template now, so maybe it needs to be moved there? Can you explain "harder to see the table, even on large screens" and "only the horizontal scrolling"? Vertical scroll only shows if the table height is greater than the div's height, which is currently "max-height: 75vh;" or 75% vertical height. It might can be increased to 80vh or 85vh, but I recall Timeshifter said 75vh was easier for him. I don't recall my preference, but it was probably 85vh or 90vh, which was minimal room to tap above/below a table on mobile to scroll past it without having to scroll through the entire table height to the bottom. No broader discussion was had about it, but mobile has to be considered with the change due to the lack of a mouse and scroll wheel or persistent page scrollbar. Jroberson108 (talk) 21:08, 18 September 2025 (UTC)

I mean that, to see the entire table, on larger screens you are forced to scroll within the {{sticky table start}} div, if that makes sense? As opposed to scrolling down the page. I believe that makes it harder to see the full thing than it would otherwise be. By "only the horizontal scrolling", I mean that {{sticky table start}} would not limit the vertical height of the table, but would allow the equivalent of overflow-x:scroll;. Apologies that my wording was unclear; I am not a CSS wizard... Best, HouseBlaster (talk • he/they) 21:15, 18 September 2025 (UTC)

@HouseBlaster: If a tall table extends past the visible page's height, you would still have to scroll on the page scrollbar if the div scrollbar were not there. Is your issue that you can't continuously scroll using the page scrollbar, but have to switch to the div scrollbar for the table, like when source editing an article? So, increasing the div's height even to 100% of the visible page will not solve your frustration? What about on mobile, do you also prefer to not have a div vertical scrollbar?

Removing the height would completely change how the template works, which would need a larger discussion IMO. Although it would have similar issues to Template:Sticky header#Known issues, I would have to test to see if any additional issues occur. As it is now, this template has less issues. If others don't want to change it, then I might be able to come up with some styles to add to your user common.css file to remove the height and shift it below the site's top sticky bar when it appears. Jroberson108 (talk) 22:17, 18 September 2025 (UTC)

You explained my position better than I could—my issue is the lack of continuous scrolling. I don't think removing the height from the existing {{sticky table start}} would be a good idea (I would oppose that), but perhaps creating a new {{sticky header with horizontal scrolling start}} (name TBD) template. Best, HouseBlaster (talk • he/they) 22:34, 18 September 2025 (UTC)

Having a third version of these sticky templates doesn't sound ideal since it seems like a preference of having or not having a vertical scrollbar. What's to stop someone from switching the template used on an article just because it is their personal preference, then having long discussions on why one is better than the other? Best to see what the majority want and, assuming no real issues, change the template accordingly. If there is a real need for both, then that can be discussed.

I have heard some similar complaints about this template, although no real discussion was had to find out what exactly they disliked. As I recall, originally {{sticky header}} was to be replaced by this one, but I think some users preferred the other template for certain circumstances, especially if the table is not wide and has no need for a horizontal scroll, although they may not have considered smaller mobile screens. Jroberson108 (talk) 23:05, 18 September 2025 (UTC)

@HouseBlaster and Timeshifter: I went ahead and tested to see if it is possible, and it doesn't seem so. The div has an overflow style, which makes the column header want to stick to it, not the top of the page. The div is needed so the row headers left-stick to it and a wide table is contained within the main content area and doesn't overflow beyond it messing up the layout. Jroberson108 (talk) 23:27, 18 September 2025 (UTC)

Thank you for investigating! Not sure which poison to use for {{user access levels}}... I guess we have plenty of time to decide. HouseBlaster (talk • he/they) 02:52, 19 September 2025 (UTC)

@HouseBlaster: For that table, I don't see a need for left sticky row headers since the table isn't too wide and a lot of the columns are easy-to-read check symbols, which means either template can be used IMO. I would recommend adding {{sort under}} to narrow the table so that it at least fits in the main content area. Since that table is pretty much the only content on the page, I'm more inclined to use {{sticky header}}. If you had several large tables, then I might lean towards {{sticky table start}}. It being a template, I'm not sure how it will be used on other pages, like if in the middle of several other large tables, so decide accordingly. Jroberson108 (talk) 14:46, 19 September 2025 (UTC)

It is used at WP:UAL#Table, where it is wrapped in overflow:auto. I've added {{sort under}}. Best, HouseBlaster (talk • he/they) 18:53, 19 September 2025 (UTC)

@HouseBlaster: I removed overflow so sticky headers work. Don't need overflow if the headers are always visible. Jroberson108 (talk) 19:58, 19 September 2025 (UTC)

Row borders

I am using sticky tables at this article and have applied two row styles on each of the table: style="font-weight:bold" and style="border-top:3px solid darkgray". Whilst the former works, the latter does not. I have used this in tables without sticky headers without any problem. Is this a bug with this template or have I done something wrong? Obi2canibe (talk) 17:49, 11 January 2026 (UTC)

@Obi2canibe: Borders disappear in some browsers when the headers are sticky due to wikitable's collapsed borders. This template attempts to fix borders. See bug, which was marked as duplicate in favor of the other. Jroberson108 (talk) 18:42, 11 January 2026 (UTC)

Multi columns sticky

Is there a way to make multiple columns in a table sticky at the same time (e.g., the first two)?
My request refers to the following table on Olympic sports. Below is a small excerpt in which the problem might become apparent if you select only one column as stick.

• as example, column 2 is selected as sticky and the cells in this column have also the "sticky-table-left" parameter to fix otherweise overlapping issues:

Miria~01 (talk) 23:19, 12 February 2026 (UTC)

@Miria~01: Multiply can stick to the top due to sortable moving those headers to the thead element, but there is no tleft element. Jroberson108 (talk) 19:17, 13 February 2026 (UTC)