Template talk:Sticky header/Archive 1

Archive 1

Archive 2

Info, history, links

See most recent Village Pump discussion. And other archived discussions: 1. 2. 3. 4. 5. See Phab:T42763. See also: Meta: Community Wishlist Survey 2022/Reading/floating table headers and meta:Community Wishlist Survey 2021/Reading/Enable sticky table headers.

For more info and history see:

• Help:Table#Tables with sticky headers
• Help talk:Table#Tables with sticky headers. Discussions

--Timeshifter (talk) 04:38, 8 October 2023 (UTC)

Why does this not work on this table?

The table in this section here:

• Norway men's national handball team#World Championship

Partial table with templates installed below:

World Championship record
Year	Round	Position	GP	W	D	L	GS	GA
1938	Did not qualify
1954
1958	Match for 5th place	6	6	3	0	3	118	102

{{mw-datatable}}{{sticky header}} 
{| class="wikitable mw-datatable sticky-header" style="text-align: center;"
!colspan=9|[[IHF World Men's Handball Championship|World Championship record]]
|-
!Year
!Round
!Position
!{{Tooltip|GP|Games played}}
!{{Tooltip|W|Won}}
!{{Tooltip|D|Draw}}
!{{Tooltip|L|Lost}}
!{{Tooltip|GS|Goals scored}}
!{{Tooltip|GA|Goals against}}
|-
|{{Flagicon|Nazi Germany}} [[1938 World Men's Handball Championship|1938]]||colspan="8" rowspan="2" | ''Did not qualify''
|-
|{{Flagicon|Sweden}} [[1954 World Men's Handball Championship|1954]]
|-
||{{Flagicon|East Germany}} [[1958 World Men's Handball Championship|1958]]||Match for 5th place||6||6||3||0||3||118||102
|}

--Timeshifter (talk) 18:39, 16 October 2023 (UTC)

@Timeshifter: Did you forget? Only works with "sortable". See #3 in Template_talk:Sticky_header#Issues and Template:Sticky_header#Usage. This is unrelated, but you should change the first colspan header row to a caption. Jroberson108 (talk) 01:40, 17 October 2023 (UTC)

Oops. I knew in my bones it was going to be something embarrassingly simple. I have been adding sticky headers often, and so I guess I rarely see tables that don't sort. And {{static row numbers}}, another one I have added to many tables, works whether the table is sortable or not. Will go take care of the table now. --Timeshifter (talk) 12:52, 17 October 2023 (UTC)

Adding sticky headers for tables that are not sortable

Hey,

there are tables in which steaky headers make sense, but where it does not make sense to be sortable.

Like the table "Previous Years": https://en.wikipedia.org/w/index.php?title=Visa_requirements_for_Indian_citizens#Recent_changes

Could you please make sticky headers available for non-sortable tables? WikiPate (talk) 15:35, 5 November 2023 (UTC)

@WikiPate: Doesn't seem like sticky headers are needed. It only has two headers, which are easy to remember. The year values can even be figured out without the header. I think this template should probably add some recommended uses like at least a certain number of column headers and rows. Jroberson108 (talk) 23:40, 5 November 2023 (UTC)

Then take this table: https://en.wikipedia.org/wiki/Boeing_737#Specifications

Sticky headers would be an improvement but sorting does not make sense here.

And here: https://en.wikipedia.org/wiki/Competition_between_Airbus_and_Boeing#Orders_and_deliveries

The arrows make the table even wider so there is more vertical scrolling necessary due to that. Without the arrows for sorting it would be better. WikiPate (talk) 00:32, 6 November 2023 (UTC)

I added {{sort row|22}} to the planes table. Note that it narrows the table. But that table is still too wide. It should be 2 tables. One for Airbus, and one for Boeing. And those names should be table captions. That would narrow the vertical height of the sticky header. Better for cell phones. --Timeshifter (talk) 02:42, 6 November 2023 (UTC)

Borders on sticky headers in Firefox tables

@Jroberson108: Greetings. I would like to get some borders on Firefox sticky headers created by {{sticky header}}.

I see that you and others managed to get borders on the Firefox sticky headers in the scrolling tables here:

• Template:2020 monthly cumulative COVID-19 death totals by country
• Template:2021 2nd half. Monthly cumulative COVID-19 death totals by country
• Template:COVID-19 pandemic death rates
• Template:2022 first half. Monthly cumulative COVID-19 death totals by country
• Template:COVID-19 vaccination data

Also in some of the tables found here:

• Category:Automatically updated COVID-19 pandemic table templates

Is it possible for Firefox using {{sticky header}}?

Feel free to use Template:Header test and User:Timeshifter/Sandbox229 in any way. --Timeshifter (talk) 23:18, 4 October 2023 (UTC)

@Timeshifter: So basically Template:COVID-19_pandemic_data/sandbox/styles2.css, which all the referenced tables use. You can search for the CSS comment "Fix Firefox missing borders", which might help you in your testing. Be sure to test with Apple devices too. Also in Windows Chrome, your implementation shows transparent borders, so the text under the sticky headers show through. Jroberson108 (talk) 23:32, 4 October 2023 (UTC)

This is way beyond my skill level. I basically just copied Tol's CSS to get it to work. I was surprised it worked without the Lua module. I guess the Lua module is just a switch in {{import style}}.

I see though that the CSS you refer to is much more complicated, and beyond my level of CSS knowledge:

	/**
	 * Fix Firefox missing borders due to position sticky and "wikitable"
	 * collapsed borders.
	 */
	.covid19-container .wikitable {
		border-collapse: separate;
		border-spacing: 0;
		border-width: 1px 0 0 1px;
	}
	.covid19-container .wikitable td,
	.covid19-container .wikitable th,
	.covid19-container .static-row-numbers.wikitable tbody tr:not(.static-row-header)::before {
		border-width: 0 1px 1px 0;
	}
	.covid19-container .static-row-numbers.wikitable tr::before {
		border-color: #a2a9b1;
		border-style: solid;
		border-width: 0 1px 1px 0;
	}

Maybe Tol and/or Dinoguy1000 can help. They have managed to get borders on some sticky headers. My time is limited due to serious health problems the last almost 2 years. Which is why I haven't been checking stuff on my iphone SE 2020 as I did in the past. I just checked now, and see that none of these sticky headers (old or new template) are working in my iphone. See various examples here:

• Wikipedia:Village pump (technical)/Archive 208#Vector 2022. Sticky page title covers top 2 lines of sticky table headers.
• Help:Table#Tables with sticky headers
• User:Timeshifter/Sandbox230

--Timeshifter (talk) 00:26, 5 October 2023 (UTC)

@Timeshifter: All the Lua module does is add code to import one or multiple template styles.

You could have just as easily used the following include in the template you created so as to not duplicate the CSS. Or Tol could have added it, since it seems like something he is managing.

If this is beyond your current knowledge, then I suggest leaving it alone. If I recall, I think TheDJ said he would work on a solution when he finds the time. I don't recall where he said it though.

It's always better to discuss caveats and solutions first, then thoroughly test (Windows, Apple, Android) before going live with a solution. As you mentioned, the current solution doesn't work on your iPhone.

In my opinion, I think the templating system for tables should do what sortable changes, which is to move consecutive full rows of column headers found at the top of the tbody container into thead. Otherwise, the sticky header template would have to duplicate the same JavaScript to move them so it also works with non-sortable tables.

As it sits, I don't know if TheDJ or anyone else is planning anything that would undo any work put into this solution. The work I did on the COVID tables was extensive, not something I want to repeat if another solution is either in the works or on the way. Also, having duplicate CSS (Tol and you) managed separately should be fixed. His original CSS only targeted non-table headers, so perhaps it can be reverted back to that and the new template can just target tables?

Sorry to hear that you have had serious health problems for years. Jroberson108 (talk) 02:53, 5 October 2023 (UTC)

@Timeshifter: Not really sure what I'd be doing here to "help". My CSS to restore cell borders is extremely hacky (like a lot of the rest of my sticky table header CSS, to be completely honest), because I never took the time to investigate why the borders were actually disappearing, so I basically just brute-forced them back into being (and it shows if you examine my CSS - there's a lot of rules dealing with [literal] edge cases). The CSS you quoted in your message looks much more elegant, as I would expect from the CSS' author understanding the underlying cause and fixing that more directly.

All that aside, I never spent any significant amount of time testing my CSS; I pretty much just got something that worked on my browser of choice (Firefox, though I might've still been on Chrome at the time), did some quick checks in one or two other browsers, and called it good enough. I've fixed a couple bugs since then, but still haven't done any amount of serious testing (and don't really plan to, though I'll continue to fix bugs as best I can, in response to things I notice or that get reported to me). 「ディノ奴千？！」^{☎ Dinoguy1000} 04:52, 5 October 2023 (UTC)

Jroberson108 and all. What you did with the scrolling tables outlined in green in my original post is a thing of beauty. It's a shame it is not being used on regular, non-scrolling, tables.

It's been a long time since I last looked at those scrolling tables in a cell phone. But I just did, after spending some time figuring out the browsers again. All the sticky headers all work perfectly in my iphone. Both vertical and horizontal scrolling. In Safari, Chrome, Edge, Firefox, and Opera. But you probably knew that since you probably found other people with iphones.

I had to create a new template because I wanted simple template and class names. I was finding it too difficult to remember the old names without having to look them up. Now I much enjoy adding sticky headers on any table I desire since the names are easy to remember. Lots of people want sticky headers. If I, a longtime experienced table editor, found the old template and class names to be difficult to use, then average editors will too. And they did, because the old template was little used. At least for sticky headers.

We have been waiting 11 years for MediaWiki to do something with sticky headers. See Phab:T42763.

If they do come up with something it is not difficult to stop these templates and associated CSS pages from working. All the code can be removed, and some noinclude or hidden note tags can be added, wrapped around a note explaining that {{sticky header}} and {{Import style|sticky}} no longer work, and can be removed from tables.

If you or anybody else can come up with some code to add borders to Firefox sticky headers in desktop view, I would greatly appreciate it.

And if by some miracle, mobile view can be made to work too, that would be great. --Timeshifter (talk) 10:15, 5 October 2023 (UTC)

@Timeshifter: Fixed borders. In regard to your mobile comment, I fixed it for small screen width (<= 720px), which works on Windows when viewing mobile version (https://en.m.wikipedia.org/...), but there is still something missing for it to work on Android in portrait mode. Jroberson108 (talk) 19:14, 18 November 2023 (UTC)

Android browsers

Jroberson108. Which Android browsers have you tested this in? And what are the results? --Timeshifter (talk) 21:15, 24 November 2023 (UTC)

Chrome and Firefox. If a table with sticky headers is wider than the screen, then sticky doesn't work for it and any other tables. It works if I zoom all the way out so the entire table is visible. If I zoom in again just a little, it stops working again. Jroberson108 (talk) 21:30, 24 November 2023 (UTC)

Thanks. Can you test Edge and Opera too? --Timeshifter (talk) 21:50, 24 November 2023 (UTC)

Issues

For your reference. Here's all the issues I've found with making "thead" top-sticky.

1. Windows browsers work. Android browsers work in landscape mode (not portrait), and the first top-sticky row when scrolled up is partially hidden (too far up) and not readable. iPhone browsers don't work per Timeshifter's [iphone SE 2020] tests. Unable to test other Apple products.
2. Doesn't make row headers left-sticky, only column headers top-sticky.
3. Only works with "sortable".
4. Once sorted, the "sorttop" row is top-sticky (moved into thead) with a transparent background showing mixed content when scrolled.
5. On non-wikitable tables, top-sticky rows have a transparent background and cell spacing showing mixed content when scrolled.
6. Firefox (Windows and Android landscape) borders missing on top-sticky rows. Chrome (Windows and Android landscape) borders are transparent showing content when scrolled. Edge (Windows, didn't test mobile) borders are transparent showing content when scrolled.
7. If it did work on mobile and there were several top-sticky rows or some spanning multiple lines, then they could block most or all of the table data on small screens, especially in landscape mode, with no way to disable the sticky feature. Each table would need a link to disable the sticky feature.

Jroberson108 (talk) 01:11, 9 October 2023 (UTC)

Jroberson108. I just checked (again?) all the iphone SE 2020 browsers I have installed: Safari, Edge, Firefox, Opera, and Chrome. Sticky headers do not work in any of them. I noticed this time that the internal header borders were removed from all the templated tables in those iphone browsers too. See example tables here: User:Timeshifter/Sandbox230. --Timeshifter (talk) 07:13, 9 October 2023 (UTC)

Iphone browsers now work. See following talk sections. --Timeshifter (talk) 17:51, 29 November 2023 (UTC)

class=sorttop rows

Could you give me an example table for this?: "Once sorted, the 'sorttop' row is top-sticky (moved into thead) with a transparent background showing mixed content when scrolled." --Timeshifter (talk) 07:13, 9 October 2023 (UTC)

column
sorttop
data 1
data 2
data 3
data 4
sortbottom

Jroberson108 (talk) 07:37, 9 October 2023 (UTC)

Showing wikitext. Gives me room to scroll the above table too.

I tested it further and it seems to only be a problem with class=sorttop

I saw that you put class=sortbottom in the table, too, and so I wasn't sure until I tested it.

{{sticky header}}
{| class="wikitable sortable sticky-header"
|-
! scope="col" | column
|- class="sorttop"
| sorttop
|-
| data 1
|-
| data 2
|-
| data 3
|-
| data 4
|- class="sortbottom"
| sortbottom
|}

--Timeshifter (talk) 07:48, 9 October 2023 (UTC)

Yeah, no issues with "sortbottom", just added both so complete. Once sorted, the "sortbottom" row is moved into "tfoot", which this template's CSS doesn't target. Jroberson108 (talk) 07:56, 9 October 2023 (UTC)

From Template:Static row numbers header is this table excerpt using class=sorttop:

I added {{sticky header}} and class=sticky-header

Cumulative COVID-19 deaths at the start of each month in 2021

Date	First case	Jan 1	Feb 1	Mar 1	Apr 1	May 1	Jun 1
World		1,472,363	1,786,759	2,021,136	2,262,948	2,603,854	3,663,570
Days to double		112	105	113	130	143	154
Countries and territories		196	202	202	205	206	209
USA	March 3, 2020	335,789	436,051	508,584	545,887	569,722	588,756
Brazil	March 19, 2020	193,875	223,945	254,221	317,646	401,186	461,931

Here it is with class=sticky

It fixes the problem as long as it is a single header row. Laddering and number of lines within that single row does not matter. See the single-header row example in User:Timeshifter/Sandbox228 too.

Cumulative COVID-19 deaths at the start of each month in 2021

Date	First case	Jan 1	Feb 1	Mar 1	Apr 1	May 1	Jun 1
World		1,472,363	1,786,759	2,021,136	2,262,948	2,603,854	3,663,570
Days to double		112	105	113	130	143	154
Countries and territories		196	202	202	205	206	209
USA	March 3, 2020	335,789	436,051	508,584	545,887	569,722	588,756
Brazil	March 19, 2020	193,875	223,945	254,221	317,646	401,186	461,931

I noticed that looking at this in preview gives one room to scroll down the last table. --Timeshifter (talk) 08:37, 9 October 2023 (UTC)

Corrected sorttop sandbox number to User:Timeshifter/Sandbox228. Solution for class=sorttop only works for single row headers. It does not work for multi-row headers. --Timeshifter (talk) 17:45, 29 November 2023 (UTC)

Problem with template in cell overriding sticky header

See: https://en.wikipedia.org/w/index.php?title=List_of_state_parties_of_the_Republican_Party_(United_States)&oldid=1185476054

Note that the cell templates roll over the sticky header when the page is scrolled. This template:

• Template:Composition bar compact

Is there something "important" in that template?

  Republican majority

State/Territorial Party	Chair	Start	Elected Executive Offices	Upper House Seats	Lower House Seats	Website
Republican National Committee	Ronna McDaniel	January 19, 2017	0 / 2	49 / 100	Voting members: 222 / 435 Non-voting members: 3 / 6
Alabama Republican Party	John Wahl	February 27, 2021	10 / 10	27 / 35	77 / 105
Alaska Republican Party	Ann Brown	May 14, 2021	2 / 2	13 / 20 (+1 Democrat in caucus)	21 / 40 (-2 caucusing with the Democratic coalition) (-1 without a caucus)

References

--Timeshifter (talk) 00:45, 17 November 2023 (UTC)

@Timeshifter: Fixed. Works on Windows in Chrome, Edge, and Firefox browsers. Works on Android (landscape mode) in Chrome and Firefox browsers. Jroberson108 (talk) 17:45, 18 November 2023 (UTC)

Thanks for this, and for fixing the header borders! I have been testing it out here and there. I haven't had enough time to do many tests on my iphone SE 2020, but what I have seen so far in iOS looks good. Will report more later.

Also, I discovered that the rapid flag and link creation method described in Help:Table here (and following sections) also works in tables with cells with additional info in the first cells in rows. As long as there is a blank line before that additional info. See example table here: User:Timeshifter/Sandbox231. It shows many Help:Table options including a sticky header. The asterisks in data cells allow the columns to sort. They won't sort with just background colors. --Timeshifter (talk) 07:46, 20 November 2023 (UTC)

@Timeshifter: Strange, the table on your sandbox has sticky headers working on Android portrait mode. The table above and the top two on my sandbox don't. The only difference is the ones that don't work are wider requiring horizontal scrolling, where zooming out to see the whole table will make them work. Jroberson108 (talk) 12:30, 20 November 2023 (UTC)

State/Territorial Party	Elected Executive Offices
Republican National Committee	0 / 2
Alabama Republican Party	10 / 10
Alaska Republican Party	2 / 2

A narrower table above for more tests.

In Safari on iphone iOS the sticky headers work if a table fits on the screen. But only if it is a "natural fit". If I zoom it to fit, then it doesn't work. Strange.

Or if it naturally fits, and I zoom it to increase the font size, then the sticky headers don't work. Even if the table still fits on the screen.

I just subscribed to each and every section on this talk page. I had missed some. I think that means you won't have to ping me. I think I will get a notification at the top of any page I am on. Not sure. --Timeshifter (talk) 13:46, 20 November 2023 (UTC)

Seems like you could just watch the whole page. The narrow table doesn't have sticky headers on Android portrait because the wider table above pushes the window wider. It only works if all widths fit the window width. On the covid project, I fixed this by restricting the width with a div wrapper and adjusting width and overflow. I'll have to play with it to see if I can do it without a div wrapper. Jroberson108 (talk) 13:55, 20 November 2023 (UTC)

I got a notification at the top of the page from your latest reply. I got notifications for your latest reply on both the watchlist and the top of the page. If I am only watching the whole page, I only see it on the watchlist. I noticed that if I am only subscribing to a talk section, but not watching the whole page, then I only get a top of page notification. No notification on the watchlist. --Timeshifter (talk) 20:46, 29 November 2023 (UTC)

Iphone browsers

My iPhone SE 2020 gets the latest iOS version.

In mobile view on iphone Safari, Edge, Firefox, Opera, and Chrome the sticky headers show up in both portrait and landscape view. It doesn't matter if the table extends past the screen. It doesn't matter on those 4 browsers whether I pinch/zoom. The sticky headers always work.

When I am logged out I see Vector 2022 in desktop view on all the browsers.

In desktop view on iphone Safari, Edge, Firefox, Opera, and Chrome in Vector 22 (logged in) it is different depending on whether the TOC is in the sidebar or the dropdown menu. Dropdown TOC: Sticky header works only if the widest table fits. Sidebar TOC: It only works if the sidebar TOC is visible on the screen, and only if the widest table fits. The Vector 2010 sticky header works if the widest table fits. And only if the Wikipedia sidebar menu is fully visible too (except Chrome where it doesn't matter). --Timeshifter (talk) 21:32, 29 November 2023 (UTC)

Desktop view on PCs

See this very wide table with a sticky header:

• https://en.wikipedia.org/w/index.php?title=Competition_between_Airbus_and_Boeing&oldid=1185553194#Orders_and_deliveries_by_year

Narrow the browser window to make the table extend past the screen.

In desktop view on a Windows 10 Pro PC on Edge, Firefox, Opera, and Chrome the sticky headers always show up. It doesn't matter if the table extends past the screen. --Timeshifter (talk) 15:24, 1 December 2023 (UTC)

The doc says it works on desktop, so what's the problem? The problem is on mobile. Jroberson108 (talk) 15:45, 1 December 2023 (UTC)

The doc currently just says it works on desktop, but not whether it works if a table extends past the edge of the screen. I didn't remember, so I checked it against that very wide table linked above. This allows others to easily verify this too. --Timeshifter (talk) 17:48, 1 December 2023 (UTC)

Usually you just need to mention what doesn't work on the doc as you find it instead of listing every browser and platform that does work, which there are far more combinations than what is listed (desktop, laptop, tablet, phone, etc. / Windows, Mac, Linux, etc. / Chrome, Edge, Firefox, etc.). The template is live, so the reader can assume it works unless otherwise stated. The talk page is a good place to discuss what works and doesn't as opposed to bogging down the doc with too much information. The only time it doesn't work for me is on my Android phone when the table width exceeds the screen width regardless of browser, which affects all sticky tables on that page. Jroberson108 (talk) 19:37, 1 December 2023 (UTC)

I removed the browser list from the doc since in desktop computers they all work regardless of table table width.

In mobile view on my iphone SE 2020 I did not notice a difference between browsers when looking at the same page. For example, I just checked again by going to the Wikipedia home page and looking at the first article linked on the page. They all look exactly the same in mobile view in all 5 browsers. Is it the same for you in Android? --Timeshifter (talk) 21:21, 1 December 2023 (UTC)

Not sure why testing Wikipedia's home page matters? We just need to test tables using this template. If you can't find any issues with iPhone, then we just need to mention Android in a section maybe named "Known issues". Might can also mention that it only works with "sortable", which isn't fixable. Should mention the issue of having too many column header rows on mobile landscape mode where it can cover up most or all of the data. Lastly mention your "sorttop" workaround too, although it bypasses all the recent styles fixes I did like for borders and mobile, so it needs more testing or be omitted. Jroberson108 (talk) 22:42, 1 December 2023 (UTC)

I meant the first article link out on the Wikipedia home page. It is just an easy, fast way to verify that the mobile view is the same on my iphone SE 2020 between browsers. I had already tested tables at another time. I wasn't paying much attention then to whether the mobile view was exactly the same between browsers. This time that is all I was paying attention to. So I guess it is not really accurate to say we are looking at different browsers in mobile view in an iphone SE 2020.

Does mobile view look exactly the same between browsers on Android?

Doc already says "It only works with sortable tables." On the top line of the doc.

I added a note in the top section about too many column header rows.

Sorttop workaround is linked from the "Special Cases" section of the doc. That workaround class already existed in Tol's original template. I copied Tol's template to create this template. Feel free to create a better solution. That is not my area of expertise.

Android issues are mentioned here:

• Template:Sticky header#How well it works on different devices

I think it is important to mention what works. Otherwise people may mistakenly believe it works on desktop, laptop, tablet, phone, etc. / Windows, Mac, Linux, etc. / Chrome, Edge, Firefox, etc.. We don't know yet whether it works in tablets, ipads, laptops, Linux, desktop Macs, etc.. See WP:NOTPAPER. The doc page is not long at all, and some stuff has been moved to sandboxes. --Timeshifter (talk) 23:54, 1 December 2023 (UTC)

What does WP:NOTPAPER have to do with this discussion? It's not a mistake to believe something works unless specified, which most templates that I looked at take the same approach. You add to the list when issues are found. Also, you have contradictory statements in that section saying it works on Android, then it doesn't. Very confusing, have to keep it simple and concise. I'll try to clean up the doc when I have a chance. Jroberson108 (talk) 02:12, 2 December 2023 (UTC)

I clarified and shortened it. --Timeshifter (talk) 05:32, 2 December 2023 (UTC)

Class sticky not working on mobile

The sticky class doesn't work on my Android phone and most likely on iPhone. It is not top-sticky and on the desktop version the borders are missing. The styles that fix mobile and the borders are for the sticky-header class, which is applied to and adjusts the table, and by extension adjusts the table's elements. The way the sticky class is implemented, it's applied to a row with no way to select the table.

Overall, targeting one row with the sticky class isn't a good solution. Better would be to instead add something to the table to target a single row like one of three classes: sticky-header-row1, sticky-header-row2, or sticky-header-row3. Then I might have a chance of applying similar styles to the table as a whole.

Also, I'm fairly certain targeting one row regardless of approach will have issues if there is a row of column headers above it with a rowspan that encroaches on the target row.

@Timeshifter: You have any thoughts on having the editor choose one of three classes to add to the table wiki instead of adding the sticky class to the target row? All this assumes having (after sort) top-sticky sorttop rows is undesirable. Jroberson108 (talk) 15:35, 3 December 2023 (UTC)

See sorttop tests:

User:Timeshifter/Sandbox228#Solution for single row header. Narrower table

User:Timeshifter/Sandbox233#Solution for single row header. Narrower table by itself

I've tested it in Safari, Edge, Firefox, Opera, and Chrome on iphone SE 2020.

Top-sticky for class=sticky does not work at all in mobile view on iphone.

In desktop view on the iphone it works if there is no table on the page extending past the screen. If one table is too wide, then top-sticky doesn't work on the narrow table too. Pinch/zoom-out will work sometimes if it makes the widest table fit.

There are no header borders in either view on the iphone.

However you decide to work on the sorttop problem is probably fine by me. Cause I have no clue. :)

--Timeshifter (talk) 19:33, 3 December 2023 (UTC)

Thanks for confirming that it also doesn't work on iPhone and rechecking other things. I thought it over more since yesterday and I think adding a class to the table wiki to target a single row would be the best approach. Obviously, the row will be counted from the top of the table. I may just add sticky-header-row1 and sticky-header-row2 for starters, and can add more if requested. I don't anticipate much usage for row 2 or a high demand for anything beyond. Jroberson108 (talk) 22:25, 3 December 2023 (UTC)

@Timeshifter: I added the sticky-header-row1 and sticky-header-row2 classes to the sandbox styles if you want to test it out. The old sticky class is commented out there too. I've tested them on my sandbox and it works on desktop and Android phone, with or without sortable. Jroberson108 (talk) 04:14, 4 December 2023 (UTC)

Can you link to the sandbox? --Timeshifter (talk) 04:20, 4 December 2023 (UTC)

It's in the doc on the right, but sure. It's at Template:Sticky header/sandbox/styles.css Jroberson108 (talk) 04:24, 4 December 2023 (UTC)

I looked on the bottom of the template and it said something about creating a sandbox. Didn't notice the top right link. I am not used to using template sandboxes since I don't create templates. I am running out of steam tonight. Can you link to your sandboxes where you have tested this? I wouldn't know where to begin, and don't want to figure it out. But I can test what you have figured out. --Timeshifter (talk) 04:36, 4 December 2023 (UTC)

The only issue, which I suspected above is when rowspan is used on the target row or on another row that encroaches on the target row. This same issue would exist with the old sticky class too. No way to fix it with styles. Jroberson108 (talk) 04:38, 4 December 2023 (UTC)

You must be really low on steam if you don't know where a user's sandbox is. User:Jroberson108/sandbox There are 8 tables at the bottom with section headers starting with "sticky-header-row1" and "sticky-header-row2". Add this to the top of your sandbox page to include the template's sandbox styles: . Don't add the {{Sticky headers}} code or you will include the template's live styles. Jroberson108 (talk) 04:46, 4 December 2023 (UTC)

My energy, health, and available time goes up and down. I don't have the time right now to create more sandboxes. I am not like you. I don't use one sandbox for everything. If you want help from me and others, I suggest using a numbered sandbox with one topic. I see a multitude of tables on your sandbox page. And I am supposed to combine this and that on another sandbox page. Please do all the work you can on a numbered sandbox page focused on one topic. Then I, or others, can do some iphone tests without spending a lot of time.

It's like you removing "transclusion count" from doc pages, and saying that it is OK because that link is found on the transclusion list. That is assuming average editors even know it exists. I learned long ago that developers often make assumptions based on their own skill level. Big mistake. Doc and help pages should be for new editors too, with little or no skill. Keep it simple. --Timeshifter (talk) 15:10, 4 December 2023 (UTC)

I'm in the process of setting the template's sandbox and testing pages, which is what they are meant for. I've already got the sandbox setup. Jroberson108 (talk) 15:19, 4 December 2023 (UTC)

@Timeshifter: From your last comment about me as a developer, which I take as a personal attack (WP:PA), I've decided to stop working on this project. This isn't the first time. "Comment on content, not on the contributor." (WP:READFIRST) FYI, I've removed this project from my watchlist. Jroberson108 (talk) 16:36, 4 December 2023 (UTC)

Jroberson108. It was in no way meant as a personal attack. In fact it is a common observation in business and elsewhere. People who are skilled in an area often make assumptions about others because they assume others must be able to see the "obvious". See: Curse of knowledge. And Keep It Simple. You could look at what I said as a complement, in that I am acknowledging your skill. I have made this observation elsewhere, and other developers were not offended. It's a general observation, with the caveat of "often". That is not a personal attack. --Timeshifter (talk) 18:10, 4 December 2023 (UTC)

Gap between top and sticky headers depending on screen size

@Timeshifter: Do you know why these styles are there? Depending on the screen size, these styles mess up the distance between the top of the screen and the sticky headers. This causes scrolling data to be visible both above and below the sticky headers. It should only be visible below.

body.vector-sticky-header-visible .sticky {top: 3.125rem;}

body.vector-sticky-header-visible .sticky-header > thead {top: 3.125rem;}

Jroberson108 (talk) 18:32, 2 December 2023 (UTC)

No idea. That was copied from Tol's template.

I noticed the problem you mentioned now and then. I am trying to remember when exactly it occurs.

--Timeshifter (talk) 19:11, 2 December 2023 (UTC)

Let me know if you remember anything. If I remove or change those styles, it will have to also change on Tol's template since the exact same sticky and sticky-header classes are used. These duplications shouldn't exist to avoid these kinds of conflicts if a page uses both templates for some reason. Jroberson108 (talk) 03:59, 3 December 2023 (UTC)

Only the sticky class name is the same according to the doc here: Template:Import style. I have found only one situation where it is useful. See: User:Timeshifter/Sandbox228#Solution for single row header. So that class name could be changed in the CSS. --Timeshifter (talk) 05:17, 3 December 2023 (UTC)

Thanks for the link. Actually, there's no duplication. Tol's uses the is-sticky and is-sticky-head classes here: Template:Import_style/sticky.css.

The styles probably have something to do with the new Wikipedia redesign for the desktop version. It doesn't appear to affect the mobile version. When you scroll past the page title, on a wide browser the top menu becomes top-sticky and on a narrower browser it goes away and the page's hamburger button becomes top-sticky. The sticky headers currently appear below the top-sticky menu and button. The top-sticky button causes the data to be visible above the column headers when scrolled because it doesn't run across the entire width of the page like the menu. If the column headers were flush with the top of the page like it should be, the button would overlap the first column header making it partially unreadable when top-sticky. It definitely needs to be fixed, but seems like it will be difficult due to competing top-sticky elements. Jroberson108 (talk) 05:30, 3 December 2023 (UTC)

To add more complexity, the above description is for when I am logged in. When logged out, on a wide browser there is no top-sticky menu and on a narrower browser the hamburger button is top-sticky. The difference is that the column headers are sticky to the top of the page as opposed to under the button, which means the button overlaps part of the first column when scrolling, making it partially unreadable. Jroberson108 (talk) 06:17, 3 December 2023 (UTC)

See: Wikipedia:Village pump (technical)/Archive 208#Potential fix. About 3.125rem lines of css.

I vaguely remember seeing some kind of hamburger button weirdness.

See Global Search at Toolforge. Search for "{{Import style|sticky}}" - in quotes. 103 results. The results list many English Wikipedia articles using that. Is that class=sticky?

You can also search for the other classes(?) listed here:

• Template:Import style#Notes
• Template:Import style#Catalogue

Those seem to be old, no longer used, and no longer found in the CSS:

• Template:Import style/sticky.css - Info on position:sticky:

https://www.google.com/search?q=position%3A+sticky%3B

You can also search for "{{Import style" - in quotes. I think that pulls up everything. 109 results. I only see these 2:

• {{Import style|sticky}} (103 results) and {{Import style|inputbox}} (6 results).

Template:Sticky header. See: "What links here" from English article space. It lists 142 articles transcluding the template.

Template:Import style. See: "What links here" from English article space. It lists 79 articles transcluding the template. All of those articles are transcluding the sticky headers template. Cause the inputbox class is used in only 6 pages (not in English Wikipedia articles) when you search for "{{Import style|inputbox}}" - in quotes. At Global Search.

Here are the subpages of Template:Import style:

• https://en.wikipedia.org/wiki/Special:PrefixIndex?prefix=Import+style&namespace=10

I only see one other CSS subpage:

• Template:Import style/inputbox.css

What does the Lua module do?:

• Module:Import style

--Timeshifter (talk) 07:25, 3 December 2023 (UTC)

Both templates are not used in the same article

See: How To: Find Duplicate Lines Using Notepad++.

I copied the 2 lists below into a text file, and alphabetized it. I scanned the list and saw no duplicates. I also used the above page to look for duplicates. There were no duplicates. So both templates are not used in the same article.

Template:Sticky header. See: "What links here" from English article space. It lists 142 articles transcluding the template.

Template:Import style. See: "What links here" from English article space. It lists 79 articles transcluding the template. All of those articles are transcluding the sticky headers template. Cause the inputbox class is used in only 6 pages (not in English Wikipedia articles) when you search for "{{Import style|inputbox}}" - in quotes. At Global Search. --Timeshifter (talk) 19:23, 4 December 2023 (UTC)

Problems with Template:Static row numbers subtemplates

Note to self.

{{Sticky header}} works with {{static row numbers}}. But it does not work well with this subtemplate: {{static row numbers table}} (at least as it was originally designed to be used; go there to see what to replace it with). {{Static row numbers table}} breaks another template (at least as it was originally designed to be used). So {{static row numbers table}} is not salvageable. It no longer serves its original purpose of simplifying the use of {{static row numbers}}.

{{Sticky header}} breaks this subtemplate: {{static row numbers arrows}}. The separate sort row disappears. Use {{sort row}} instead.

The above info needs to be in the doc. Or just the main point that {{Sticky header}} works with {{static row numbers}}. But it should not be used with these 2 deprecated subtemplates: {{static row numbers table}} and {{static row numbers arrows}}.

For why see:

• Template talk:Static row numbers table#Template:Static row numbers table breaks sticky header

Requiring editors to learn multiple places to add classes to tables is not simple, and is not a good idea. --Timeshifter (talk) 02:10, 3 December 2023 (UTC)

Don't rehash discussions here per WP:CROSS-POST. Also, no need to mention deprecated templates, especially ones that predate this one. You've already got plenty on those deprecated templates.

I've added an example of how to use this template with {{static row numbers}} and {{sort row}}. The example is useful for testing since this template's styles fix borders for {{static row numbers}}. Jroberson108 (talk) 03:34, 3 December 2023 (UTC)

For others reading this: all of the subtemplates of Template:Static row numbers are in the process of being deleted. So they will no longer be a problem. --Timeshifter (talk) 08:00, 7 January 2024 (UTC)

Can someone please add this to the German Wikipedia?

This template is a must-have for every wiki Daniel Maak (talk) 18:32, 24 January 2024 (UTC)

Dare I ping Jroberson108. :) --Timeshifter (talk) 21:03, 24 January 2024 (UTC)

@Daniel Maak: This template was created fairly recently and still has some kinks to iron out. Recently we found out that the mobile scroll on wide tables is broken when used with this template, which I'm certain is due to the display: table; and display: table-caption; styles, mentioned at Template talk:Static row numbers#Header cell outline and Wikipedia talk:Manual of Style/Accessibility#Are these nested tables accessible? (these edits). Also, the class to make one row top-sticky still needs to be redone so it's added to the table instead of the row so whole-table styles can apply, something that was being worked on per #Class sticky not working on mobile. A ticket is open to fix sortable's sorttop placement that causes issues with this template, see Phab:T355492. Finally, someone will need to do some research on the process to add templates to the German Wikipedia, if it's different. Jroberson108 (talk) 21:40, 24 January 2024 (UTC)

Bolding

@Timeshifter: see MOS:BOLD:

To denote importance, seriousness, or urgency, you can also use the HTML element <strong>...</strong>, or the template {{strong}}. This way, the words can stand out for text to speech and other accessibility softwares.

— HouseBlaster (talk · he/him) 13:31, 31 January 2024 (UTC)

Concerning the bolding of: It only works on sortable tables.

The full paragraph at MOS:BOLD

Boldface (text like this) is common in articles, but is considered appropriate only for certain usages. To create it, surround the text to be boldfaced with triple apostrophes ('''blah blah'''). To denote importance, seriousness, or urgency, you can also use the HTML element <strong>...</strong>, or the template {{strong}}. This way, the words can stand out for text to speech and other accessibility softwares.

I don't think this particular bolding is important, serious, or urgent enough to require strong tags. --Timeshifter (talk) 19:55, 31 January 2024 (UTC)

Timeshifter, <strong>...</strong> is part of the Semantic Web standards. Using ''' is meant for bolding without any emphasis at all. It is the wikitext equivalent to <b>...</b>, and you can read about the difference between <b>...</b> and <strong>...</strong> here. — HouseBlaster (talk · he/him) 20:19, 31 January 2024 (UTC)

OK, but it is still not important to use it here. If the MediaWiki developers thought it was important to make all bolding use strong tags in the rendered HTML, then they could make standard bolding (''') do that. --Timeshifter (talk) 23:19, 31 January 2024 (UTC)

"Standard" bolding does not include <strong>...</strong> because text is bolded for reasons other than emphasis. As just one example, we bold the name of the article in the lead. ''' is designed for use in those cases, but is not for use in emphasis. HouseBlaster (talk · he/him) 23:24, 31 January 2024 (UTC)

MediaWiki developers could continue to use <b>...</b> for headings in the HTML. They could use <strong>...</strong> in the HTML for '''. They could pick and choose. They haven't thought it important to use <strong>...</strong> in the rendered HTML for '''.

I don't think it provides info important enough for screen readers. It is a convenience for sighted readers. It is probably an annoyance to blind people using screen readers. Being interrupted all the time by notifications about the beginning and ending of bolded text.

Until I hear from blind editors with screen readers that they want it, then I am not going to use it. Go ask them. It's your turn. I asked them last time about your last idea. They didn't recommend it. --Timeshifter (talk) 01:12, 1 February 2024 (UTC)

Arguing about how ''' does not use <strong>...</strong> is nonsensical. It does not use <strong>...</strong> markup because it is not supposed to be used for emphasis (even though countless editors do so). I have opened a thread at Wikipedia talk:Manual of Style/Accessibility, because it is clear we will continue to disagree. HouseBlaster (talk · he/him) 01:30, 1 February 2024 (UTC)

Here are the discussions:

• Wikipedia talk:Manual of Style/Accessibility#Paragraph breaks in a comment
• Wikipedia talk:Manual of Style/Accessibility#Strong tags

Most of the thread was against using strong tags. MOS:BOLD says it should rarely be done. And the semantic web is barely implemented and very problematic. And there is no button on the editing toolbar for strong tags, but there is one for bolding. --Timeshifter (talk) 02:56, 4 February 2024 (UTC)

Who in that thread opposed using strong tags? Isaacl said Conventional web best practice is to use semantic markup (which is <strong>...</strong>) rather than presentation-specific markup (which is <b>...</b>). Other editors said screen readers do no announce the start/end of bolding, but that has nothing to do with which tags should be used. HouseBlaster (talk · he/him) 03:23, 4 February 2024 (UTC)

I replied there again. Let us keep discussion there for now please to avoid duplication. Let it resolve further there. Ask your questions there. --Timeshifter (talk) 03:33, 4 February 2024 (UTC)

Template improvements

Resolved

I asked some JavaScript questions related to improving this template, but I wouldn't hold my breath on it. It also isn't a good solution for when JavaScript is disabled. The best solution would be MediaWiki moving the header rows for all tables (not just sortable) to the <thead> element without JavaScript, basically doing it when the wikitext is translated into HTML. Also wouldn't wait for that either.

• Wikipedia talk:TemplateStyles#Template scripts
• MediaWiki talk:Common.js#Class-triggered gadgets

I went through every page that uses this template to see what they made sticky, which there were 500 pages (search).

• 408 pages have tables with one header row (sortable or non-sortable). 61 of those pages have at least one table using {{sorting row}} or have a manually added sorting row (multiple header rows) that will become one header row when replaced with {{sort under}}.
• 92 pages have at least one table with multiple header rows, which some pages also have tables with one header row.

For the COVID styles:

• 48 pages have tables with one header row (search).

For {{Import style|sticky}}:

• 255 (268-13) pages have tables with one header row (search).
• 13 pages have at least one table with multiple header rows (search).

From the usage (pages: 711 (408+48+255) first row vs 105 (92+13) multi-row), I think this template would be easier to use and more understandable if the main sticky-header class were changed to make the first header row top-sticky, which would work with sortable and non-sortable tables even when JavaScript is disabled. The old sticky class would be obsolete and its usage replaced (38 pages, search). I didn't see any tables targeting a row that wasn't the first with the sticky class, which the same can be said about the COVID styles.

A second sticky-header-thead class can be added for tables that have multiple header rows, which is where most of the potential confusion can occur:

• Table must be sortable with JavaScript enabled.
• Avoid making sorttop rows top-sticky (see phab:T355492).
• Avoid making subsection header rows top-sticky.

Jroberson108 (talk) 20:41, 20 February 2024 (UTC)

So class=sticky-header would stay in its current location with the wikitable class, etc.. It would only work on single-header tables. But it would work on both sortable and non-sortable tables without any Mediawiki software changes? If so, then I support it.

The 2nd class would be for multi-row headers. Would it work on both sortable and non-sortable tables?

I am trying to simplify use of the 2nd class. It needs a simple name. An additive one. Something like:

• class=sticky-header-more - as in more rows.
• class=sticky-header-rows - rows is plural, which is a memory aid.

Where would the 2nd class be placed? Could it be placed on the same line as the wikitable class? Could it be placed by itself with the wikitable class:

• {| class="wikitable sticky-header-more"
• {| class="wikitable sticky-header sticky-header-more"

Or would the 2nd class have to go in front of the 2nd header row?:

• |- class=sticky-header-more

There are some tables with 3 rows that can't be shrunk to 1 or 2 rows. Will just one use of the 2nd class be sufficient? Or will it have to be used for each additional header row after the 1st? That's fine if it can't be avoided. --Timeshifter (talk) 22:04, 20 February 2024 (UTC)

Correct, sticky-header would work on single-header tables for both sortable and non-sortable without any changed from MediaWiki.

The second class would only work with sortable since the headers need to be moved to the "thead" element and that's the only way to do it currently. If I could add a template script, then it would be different. Like I mentioned above, if Wikipedia:On-demand gadgets is approved or MediaWiki moves the headers, then it might be possible to also do non-sortable tables for multiple headers.

The second class could be named sticky-header-multi. The two classes would be used separately, but added once in the table start wikitext.

Bare minimum:

• {| class="sticky-header"
• {| class="sortable sticky-header-multi"

Jroberson108 (talk) 23:39, 20 February 2024 (UTC)

That all sounds good to me. Including:

class=sticky-header-multi

--Timeshifter (talk) 04:48, 21 February 2024 (UTC)

@Timeshifter: I think I'm done with the new styles. They are in the sandbox, which you can view the tests at Template:Sticky header/testcases. Jroberson108 (talk) 06:25, 23 February 2024 (UTC)

The new styles are better on desktop. More stuff is fixed. I see the sorttop problem has been partially fixed. Still a sorttop problem with multi-row headers. Haven't checked in iphone yet. Wanted to write this down before I forgot the desktop test results I was seeing.

The new styles are worse on iphone SE 2020. The sticky headers are not working at all with the new styles. They worked fairly well with the old styles. I need to lower the number of columns so all the test cases fit on the iphone. --Timeshifter (talk) 11:09, 23 February 2024 (UTC)

See the note at the top of the testcases pages about mobile. Portrait not being sticky relates to fixing "mobile scroll on wide tables is broken" mentioned at #Can someone please add this to the German Wikipedia?. I purposely made the test tables wide to check if mobile horizontal scroll was working again on portrait. Did you try landscape orientation and zooming out? BTW, you can include {{Sticky header/sandbox}} in your sandbox to test one table if that makes it easier. Jroberson108 (talk) 11:44, 23 February 2024 (UTC)

Zooming out while in landscape view does not work on the iphone. It collapses the page to a small thumb that fits in a grid of thumb tabs. That was for pinch zoom.

I lowered the number of columns to just fit in landscape view on the iphone. Sticky headers (both classes) aren't working at all on the iphone with the new styles. Have tested in Safari and Firefox. They are both in mobile view on the iphone.

I need to try out stuff in my sandbox.

Mobile horizontal scroll is working on the tables in both Safari and Firefox. In both landscape and portrait view. --Timeshifter (talk) 12:04, 23 February 2024 (UTC)

Minerva skin's horizontal scroll occurs at width < 720px. My phone is 360 x 800 px, which is why I have sticky at landscape 800px width. You can get your resolution at https://www.whatismyscreenresolution.org/ Jroberson108 (talk) 12:19, 23 February 2024 (UTC)

375x667px on the iphone SE 2020. So you are seeing sticky headers on your cell phone? --Timeshifter (talk) 13:34, 23 February 2024 (UTC)

Yes, but only in landscape. Your resolution would explain why you don't see sticky. Just curious, do you have everything larger on your phone the same way you do on your PC? Can it be lowered some to test sticky? Doesn't seem like it can be changed from the viewport listed at https://blisk.io/devices/details/iphone-se-2020 Jroberson108 (talk) 18:35, 23 February 2024 (UTC)

See: User:Timeshifter/Sandbox243. Even when I lowered the number of columns to 5 for some of the tables I still did not have sticky headers on the iphone. But when I lowered the font size from 100% to 85% in Safari the sticky headers worked in all the tables in that sandbox. Even the ones that extended past the edge of the screen. 85% was the first step down that was offered.

In Firefox I just noticed the zoom setting. Previously I was talking about pinch zooming in and out.

Lowering it down one step (to 90%) made the sticky headers work on all the tables. None of the tables extended past the edge of the screen in landscape view.

I don't know where the zoom settings are on Safari. I will have to look around further later.

I don't understand why the sticky header did not work at first in the 5-column table. It fit in the screen width. So did the 6-column table.

--Timeshifter (talk) 21:18, 23 February 2024 (UTC)

Doesn't look like the other 20 newer iPhones will have issues in landscape orientation with the default font size except iPhone SE 2022 per the viewport settings at https://blisk.io/devices. 7 older ones shouldn't have issues either, assuming their browsers support sticky. Jroberson108 (talk) 00:00, 24 February 2024 (UTC)

Right now sticky headers are working on nearly all cell phones on single or multi-row headers. Using only class=sticky-header. And the width of the table does not matter on both mobile phones and desktop PCs. Tables are sticky in portrait and desktop view on mobile. See:

• User:Timeshifter/Sandbox244.

The few tables using class=sorttop rows require class=sticky. It only works on tables with a single row of headers. Class=sticky does not work at all on mobile. It works on desktop PCs.

The new styles require 2 classes depending on the number of rows. But they do not require that tables be sortable. Table width does not matter on desktop PCs, or iphones with large enough viewport. I don't know if viewport size effects Android phones. Single-header-row tables using class=sorttop rows work with class=sticky-header. Multi-header-row tables using class=sorttop and class=sticky-header-multi do not work (sorttop rows become sticky).

I prefer the old styles because only one sticky class is needed in almost all cases. I don't mind adding class=sortable to tables to make them sticky.

And the old styles work on nearly all cell phones. Most page views on Wikipedia are from cell phones.

The number of tables using class=sorttop is not that great, and both sets of styles have problems with it.

There are plenty of cell phones with a viewport less than 720 pixels wide in landscape view:

• https://viewportsizer.com/devices

--Timeshifter (talk) 10:45, 24 February 2024 (UTC)

As already mentioned, the old styles break wide table horizontal scrolling on mobile < 720px and the table was removed from Help:Table because of this. When the old styles are fixed, sticky won't work on mobile < 720px, same as the new styles. Minerva doing this is not a problem since it was intentionally designed that way. I can just as easily break the same feature on the new styles. The question is, is it worth it on a really small screen width? You will have a sticky experience, but instead of horizontally scrolling wide tables with readable text, you would have to zoom out and fit the table on the whole page with smaller semi to not readable text depending on how wide the table is. If you can't read the text, then the sticky feature is a hindrance that you can't disable. This is the experience I have on Android portrait orientation (360px width).

Also, your list includes phones from 10+ years ago that may not support sticky and would have difficulty getting a phone plan for. Finding out what is most used today is a better metric. The first result I found was https://today.yougov.com/ratings/technology/popularity/phone-models/all. Maybe there is a better analytics page somewhere. Jroberson108 (talk) 17:13, 24 February 2024 (UTC)

I know others with iphones, and some will use them as long as possible. Iphones are known for getting OS updates longer than Android phones. Even after the OS updates end, they will get security updates for a long time. And even after those end the iphones may still work for awhile. I wouldn't recommend putting banking apps on them though, not even on those getting security updates. True security requires iOS updates too. But the phone can still get cell plans, make calls, and go on the web. The camera, and many of the apps, will still work. See models still getting security updates:

• IPhone#Models. - iphone 6, 7, 8, X, and SE (1st) are still getting security updates. Their basic models have less than 720px viewports:
• https://yesviz.com/iphones.php - iphone viewports.
• https://yesviz.com/viewport - Many brands of cell phones.

With the current sticky header styles I don't have any problem with wide tables on my desktop PC or my iphone. I don't have to zoom or change the font size. Text is readable. Tables with class=sticky-header work fine no matter the width. I am not seeing the problems you are seeing. Of course, I am not on an Android phone, so I have no idea what you are seeing.

For example, see: List of U.S. states and territories by incarceration and correctional supervision rate. As you scroll down the page the tables get wider. And the number of header rows increases. I can see them all on my iphone in portrait and landscape view. Even when I have to scroll horizontally, the tables are sticky and understandable. I can scroll horizontally, and then vertically in a table. So I can see any part of the table even in portrait view, and the sticky header tells me what column I am looking at. Even in the last table that is very wide, and has 3 full header rows. The sticky header rows don't take up much room in portrait view. Even in landscape view they are not overwhelming. For that very wide last table: On my desktop PC I can narrow the browser window, and the table headers are still sticky even with the horizontal scroll bar.

Help:Table problems were not due to sticky headers. I was just trying to avoid any table wider than portrait view on cell phones. Tables of all kinds still work on help pages even when they were wide, but wide tables are less convenient for learning on a help page. I did not want to force people to have to switch to landscape view. This way people can learn from Help:Table even in portrait view on their cell phones. Plus vertical scrolling is smoother when there are no wide tables in portrait view. --Timeshifter (talk) 19:51, 24 February 2024 (UTC)

Phone updates won't change the viewport size. List of U.S. states and territories by incarceration and correctional supervision rate#Male and female incarceration and correctional supervision is a good example of a wide table and what I'm experiencing. Instead of being able to horizontally scroll that table, it pushes the entire page width beyond Minerva's design, requiring the page to instead be horizontally scrolled. In portrait, I have to zoom out to make sticky work for that table, making the text unreadable both in the table and on the rest of the page. I didn't have to zoom out on the other sections if only those sections are open. If all sections are open, I have to zoom all the way out to make sticky work for any of the tables, again making the page unreadable. Is it the same for you for that table?

"Help:Table problems were not due to sticky headers. I was just trying to avoid any table wider than portrait view on cell phones." That's the exact problem I am experiencing, describing, and the same reason I gave in the other discussion about the help page. Wide tables using the old sticky styles push the page width on Android portrait.

If you are OK with this feature causing accessibility issues (not readable) on at least Android phones, then I can make sticky work. Another option might be to make it work down to 667px width, so at least it works in landscape on your iPhone, not portrait. Jroberson108 (talk) 20:32, 24 February 2024 (UTC)

Is this helpful?:

• https://www.w3schools.com/css/css_rwd_viewport.asp

Are you able to view the widest table in Android landscape view, and see sticky headers? Are you able to drag the table into view without zooming or changing the font size?

It sounds like we are seeing the same thing in landscape view. On the iphone the table extends past the screen. It makes the whole page wider. But I can drag the table into view. And I see sticky headers.

But in the iphone the same thing happens in portrait view too. I don't have to zoom or change font size or anything. I just drag the table into view a little bit at a time. I have to drag more since so much of the table is offscreen. The sticky header makes it comprehensible.

When I say a wide table makes the page wider I mean I see blank space above the table. Text above and below the table still wraps within the viewport, and doesn't extend beyond the screen. --Timeshifter (talk) 21:23, 24 February 2024 (UTC)

That link talks about something that needs to be added to the "head" element of the page, not something that templates can do. Also, Minerva already sets a similar viewport.

In landscape view, I have to zoom out to see the entire table before sticky works, which is still readable and does push the page width, but not to the extreme that portrait does. Text outside the table maintains the same page wrap as before, it's just the table that extends beyond the page. Any amount of horizontal scrolling without zooming out to see the entire table means sticky doesn't work. It sounds like the biggest difference is that on iPhone sticky works with horizontal scrolling without the need to zoom out, but on Android sticky doesn't work without zooming out and affecting readability. And other brands and/or models are unknown since we can't test them with sticky. Jroberson108 (talk) 23:10, 24 February 2024 (UTC)

I adjusted the styles so sticky works on your iPhone and not affect my Android portrait. See if it works on your iPhone landscape and portrait. Jroberson108 (talk) 02:44, 25 February 2024 (UTC)

Are you using Vector 2022? I assume you are. With the latest test CSS, sticky headers are not working at all in both portrait and landscape view on the iphone. Narrow tables did not work either.

I just checked these pages that have both wide and narrow tables using the test CSS:

• User:Timeshifter/Sandbox243
• User:Timeshifter/Sandbox245 - Narrow 3-column tables only.
• Template:Sticky header/testcases

I just noticed the complications involved:

• https://yesviz.com/devices/iphone-se-2020 - section: "CSS Media Queries".

You might consider buying a cheap used iphone. This may be where I go if mine breaks: https://www.ebay.com/str/mobileworldny I have bought a couple used PCs from a couple different ebay sellers with warranties, large sales volumes, and high ratings. Very happy with them. Iphone 12 Mini (at $225 used) has 5G, and has probably a couple years or more of full iOS updates, and a couple more of security updates. Even the older SE 2020 ($130 used) has optical image stabilization. End of sales pitch. :) - Keep your Android phone for Wikipedia testing. Or vice-versa. WiFi without a cell plan for one of them. Or hotspot tethered. https://www.apple.com/iphone/compare/?modelList=iphone-12-mini,iphone-se-2nd-gen --Timeshifter (talk) 14:32, 25 February 2024 (UTC)

Changes in CSS

Resolved

No, its for Minerva, which is what the mobile site uses. https://en.m.wikipedia.org/

I removed the height, which may differ. Can you give that a try? If it doesn't, can you give the dimensions from this site? https://whatismyviewport.com/ Jroberson108 (talk) 17:14, 25 February 2024 (UTC)

Yeah, I need the viewport width x height from that site for portrait and landscape (not screen size). The viewport is slightly less. Jroberson108 (talk) 17:34, 25 February 2024 (UTC)

It is working now in portrait and landscape view on the iphone SE 2020. It looks the same as the old styles. Doesn't matter how wide the table is.

The only thing that does not work is sorttop lines combined with multi-header rows. Its sticky headers work, but the sorttop lines are sticky too after sorting. I created a wide table for multi-header rows:

• User:Timeshifter/Sandbox243#Test template static row numbers (sticky-header-multi). Wide table

Its sticky headers work too. In both portrait and landscape view.

• https://yesviz.com/iphones.php - 375 x 667

That link above has the same maximum viewport size for my iphone SE 2020 as what I am seeing here:

• https://whatismyviewport.com - It says screen size is 375 x 667.

But it says the actual viewport (not counting stuff on the top and bottom) is:

• 667 x 300 in landscape view.
• 375 x 526 in portrait view.

When I scroll up a page those top and bottom lines disappear. When I scroll down the page they return. --Timeshifter (talk) 21:39, 25 February 2024 (UTC)

Glad to hear it's working. I added the height you provided, so can you recheck one table in landscape and portrait to make sure it's still working?

For multiple headers (sticky-header-multi), the sorttop row becoming sticky after sorting is the same issue that exists on the current styles. It has to be fixed in sortable per phab:T355492. It works correctly if only one header is sticky with the new sticky-header class.

What disappearing top and bottom lines are you referring too? Something inside or outside the table? Or are you talking about your phone's interface like the soft navigation bar? If it's the interface, then I have the same on my phone, which is normal. Jroberson108 (talk) 23:09, 25 February 2024 (UTC)

After the latest changes in the CSS, sticky headers stopped working completely in Safari. It still works the same in Firefox.

I checked: https://whatismyviewport.com

The viewport numbers are different between browsers. But same for screen size: 375px x 667px.

• Safari: Portrait is 375 x 538. And landscape is 667 x 314.
• Firefox: Portrait is 375 x 526. And landscape is 667 x 300.

--Timeshifter (talk) 00:32, 26 February 2024 (UTC)

Ok, I reverted the last change. At least the width stays the same. Are there any more tests or is it good to go? Jroberson108 (talk) 01:23, 26 February 2024 (UTC)

I have no idea. I hope it works for other iphones. I see info about media queries, but I haven't studied this stuff.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries

https://www.google.com/search?q=media+queries

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries

https://www.w3schools.com/css/css3_mediaqueries.asp

Is it working in your Android phone in both landscape and portrait?

--Timeshifter (talk) 01:56, 26 February 2024 (UTC)

Android landscape has sticky, but not portrait, so it works correctly and the text stays readable. Width 667px makes sticky work in landscape for the missing iPhones that support sticky. Width 375px covers portrait for several iPhones. Both don't affect any other brands, for now. They really should include the height to be as specific as possible in case other brands release a phone with that same width so it doesn't cause readability issues. Unfortunately, there is no way to specify Apple, iOS, or iPhone in the media query, and Wikipedia doesn't support "-webkit-device-pixel-ratio" to increase specificity, so there is a lot of testing involved for this feature to work without causing readability issues for others. If there are other iPhones to test, we can add them, even after going live. I think the styles are good to go as is. Jroberson108 (talk) 02:51, 26 February 2024 (UTC)

Is Android better with the new styles? In what ways?

I really wish we could get some more users with iphones and Androids to tell us how the old and new styles compare on their cell phones. Maybe at WP:VPT.

--Timeshifter (talk) 03:04, 26 February 2024 (UTC)

Yes it's better. With sticky disabled on Android portrait, a wide table can be horizontally scrolled and the page is not pushed wider than the content area, which is what Minerva was designed to do. With sticky enabled, the page is pushed wider and the entire table has to be viewed on a small screen for sticky to work, which makes the text unreadable. It's a hinderance that can't be disabled with the old styles. Jroberson108 (talk) 03:22, 26 February 2024 (UTC)

Also, Android and iPhone aren't the only types of phones. Jroberson108 (talk) 03:25, 26 February 2024 (UTC)

I am still not clear because I don't know when you are talking of old or new styles.

So with the new styles tables of all widths are sticky without problems or extra steps in landscape view on your Android phone? But not on portrait? Are any tables sticky in portrait view without extra steps or problems? Which ones? Only narrow tables that fit? Do those stop working if a too-wide table is there too?

With the old styles are tables of all widths sticky without problems or extra steps in landscape view on your Android phone? What is going on with portrait view? Same questions.

I am trying to see if there are any substantive improvements on Android with the new styles. --Timeshifter (talk) 03:57, 26 February 2024 (UTC)

First, I've already said there is an improvement with the new styles on Android, so trust me as I am trusting your iPhone experience. I've given the same reasons several times already. Second, mobile is only one improvement, so I wouldn't get too hung up on this one thing, especially since the styles aren't set in stone. We've both tested it.

The new styles work for me the way they should in desktop (multiple browsers and skins), Android (multiple browsers and orientations), Wikipedia Android app, and when JavaScript is disabled, where everything is readable (no accessibility issues introduced). Do the new styles work for you too? If so, let's go live. Jroberson108 (talk) 04:58, 26 February 2024 (UTC)

I started a thread at Wikipedia:Village pump (technical). Title may be fine tuned, so search for "sticky header". --Timeshifter (talk) 13:33, 26 February 2024 (UTC)

Archived here: Wikipedia:Village pump (technical)/Archive 211#Sticky header template for tables. Need iphone and Android testers. --Timeshifter (talk) 03:18, 25 March 2024 (UTC)

Headings cover the row when you link an anchor in a table

In Vector legacy, if you link to an anchor in a table row then the sticky headers cover the linked row, e.g. in https://en.wikipedia.org/w/index.php?title=List_of_national_capitals&oldid=1215305078&useskin=vector#List. Tested in Firefox, Chrome, Edge. Can this be avoided? PrimeHunter (talk) 09:31, 24 March 2024 (UTC)

@PrimeHunter: In Vector 2022 in Firefox on Win 10 Pro PC: I get some strange results. In the version you linked to I see what you are seeing.

But when I link directly to the page (which currently is your version):

List of national capitals

the compact TOC letter links go a row or two ABOVE the first instance of that letter.

I haven't checked out Vector legacy (2010) yet. Or other browsers. --Timeshifter (talk) 10:00, 24 March 2024 (UTC)

@Timeshifter: My link has useskin=vector to display the page in Vector legacy regardless of your preferences. A normal wikilink List of national capitals uses the skin in your preferences. PrimeHunter (talk) 10:08, 24 March 2024 (UTC)

Oh. OK. I have no idea how to fix the problem. Maybe Jroberson108 can help. --Timeshifter (talk) 12:06, 24 March 2024 (UTC)

@PrimeHunter: Seems normal for the anchor link to jump to the top of the page, which the sticky headers compete for that space. "Vector 2022" appears to be the only skin not affected for some reason. Did a quick search and found someone using the scroll-margin-top style. I'll give that a try. Jroberson108 (talk) 17:29, 24 March 2024 (UTC)

Well, that test ended quickly. If I add it to my browser's inspect element, then it works. When adding it to this template, the CSS sanitizer doesn't support it. Warning: Unknown property 'scroll-margin-top'. Looks like there is a way to enable it on MediaWiki, but not for this template. For reference, I tested adding this, where it would later be restricted to certain skins and the 100px fine-tuned.

.sticky-header [id],
.sticky-header-multi [id] {
  scroll-margin-top: 100px;
}

Jroberson108 (talk) 17:53, 24 March 2024 (UTC)

@Jroberson108: Thanks. Templatestyles have restrictions which are not in user CSS and global CSS. 100px relies on circumstances and is too much for me but 2.2em works fine for me in User:PrimeHunter/vector.css. The code would probably also be permitted in MediaWiki:Vector.css but may be controversial. Some editors want to minimize global CSS. Code in vector.css is apparently also added to Vector-2022 which already avoids the problem and would scroll too much with the code so that should be handled if a global solution is made. I haven't tested other skins. PrimeHunter (talk) 18:21, 24 March 2024 (UTC)

@PrimeHunter: Yeah, 100px was too much for me too; just an initial test value. It might still move behind the sticky headers if there are multiple or tall headers. Yeah, I can't see them adding it to the global styles, especially for something that is probably on less than 1% of Wikipedia's articles. Glad it works in your user styles. Jroberson108 (talk) 18:41, 24 March 2024 (UTC)

@PrimeHunter: BTW, I removed ".wikitable" from the styles above if you want to adjust your user styles too. Jroberson108 (talk) 18:48, 24 March 2024 (UTC)

Thanks. I now use this so it only applies to Vector legacy:

.skin-vector-legacy .sticky-header tr[id],
.skin-vector-legacy .sticky-header-multi tr[id] {
    scroll-margin-top: 2.2em;
}

PrimeHunter (talk) 22:15, 24 March 2024 (UTC)

@Jroberson108: You wrote that there were around 500 transclusions on Feb 20, 2024 (see your post higher up on that date). Now on March 24, 2024 there are around 900 transclusions. I started the template on Oct 2, 2023. So its rate of adoption by others for tables is speeding up.

Template:Compact TOC. Jroberson108 and PrimeHunter. Could some changes be made to that template to fix this problem somewhat? --Timeshifter (talk) 03:11, 25 March 2024 (UTC)

@Timeshifter: Looks like there are 23 articles that use both templates out of the 6,802,299 articles on Wikipedia (0.0003%), and that's only if they aren't using the default "Vector 2022" skin, so an even lower percentage.

The issue is that template styles don't support the style that can fix it. {{Compact TOC}} doesn't have a style sheet, so if styles are added to fix it, then it would have to be added to this template. Not sure if there are other styles that can fix it? I haven't looked to see why "Vector 2022" doesn't move the section to the very top of the page.

@PrimeHunter: Looks like some of those 23 articles put the "id" in tr, th, td or span tags, so the "tr" can be removed so it works in more cases. See my adjusted code above. Some add the id manually or through {{anchor}}. List of buses is the only one that uses the sections' id above each table instead of in the tables. Jroberson108 (talk) 04:55, 25 March 2024 (UTC)

Interesting search method I did not know about:

hastemplate:"sticky header" hastemplate:"Compact TOC"

It probably won't be long before most of the 7000+ transclusions of {{Compact TOC}} use {{sticky-header}}. But since I think one has to be logged in to select Vector 2010, then there may never be a lot of people with the problem.

I hadn't looked at compact TOCs for awhile. I would start using it if it didn't require IDs, or if there were some way to automatically insert them. Also, if it automatically detected which letters of the alphabet were missing in the first letters of the column cells in the first column on the left. Or if some other tool did that. --Timeshifter (talk) 05:54, 25 March 2024 (UTC)

{{Compact TOC}} may be mostly used with section links like List of poets where there is no table. I made {{Table TOC}} in 2021 for indexing long non-alphabetical tables like The Economist Democracy Index#List by country but it's poorly documented and only has 162 uses so far. PrimeHunter (talk) 09:14, 25 March 2024 (UTC)

@PrimeHunter:. The table TOC template looks good for tables sorted by major region. Then there is not much TOC stuff to update if the rest of the table has a major update. I count 7 regions in the Democracy Index table. --Timeshifter (talk) 08:16, 26 March 2024 (UTC)

Yeah, looking at the first page of {{Compact TOC}} transclusions, I see a lot of glossary usage and some table usage. BTW, it and the template you made don't work in Minerva width < 720px (small mobile screens). Works in my Android landscape though. Jroberson108 (talk) 15:19, 25 March 2024 (UTC)

@PrimeHunter: Looks like it works for "Vector 2022" because scroll-padding-top was added to the global styles, which is another style not supported in template styles. It might be possible for them to add something generic like this to the other global skin styles too, at least the "html" one. It works for "Vector legacy" when I add it to inspect element. Feel free to inquire if you think so too.

@media screen {
  html {
    scroll-padding-top: 75px
  }
}
@media screen and (min-width: 1000px) {
  .client-js.vector-sticky-header-enabled {
    scroll-padding-top:calc(3.125rem + 75px)
  }
}

The second style adjusts the top distance under the sticky header bar (+3.125rem), which doesn't exist on the other skins. Timeless has a sticky header bar at width >= 851px with a height of 3.51em. Finally, Minerva width < 720px {{Compact TOC}} doesn't work, so can exclude it from there. Jroberson108 (talk) 17:35, 25 March 2024 (UTC)

sticky header template works just about - just makes the data in the lines scroll under it and reappear above the sticky header :)

Note: Thread consolidated to here.

Template for tables with lots of rows (example all 190 countries) and columns (example 12 columns) that leaves the first row visible when scrolling to your country, so you can still understand what data in what column means

Example that shows the issue: https://en.wikipedia.org/wiki/COVID-19_lockdowns#Table_of_pandemic_lockdowns

Hi fellow wikipedians,

I seem to remember there was a sortable table template that could leave the first line indicating what every column data was about and allow you to scroll down and put your country for example just under that line so one could take a screenshot showing what those numbers meant for your country.

Can't find that template anymore.

Thank you, SvenAERTS (talk) 10:39, 28 March 2024 (UTC)

@SvenAERTS: I added some sticky headers, etc..

Jroberson108 may be able to help further. See also:

Template:Sticky header. Template:mw-datatable. Template:sort-under. Template:Table alignment.

Help:Table/Advanced#Advanced scrolling tables with sticky headers.

The table needs to be broken up into multiple tables. So that the tables are viewable in landscape orientation on cell phones. It is way too wide currently. Even for a desktop monitor.

And rather than being in a template I think it would be better in a separate page. And then linked to the articles rather than transcluded in the articles.

I couldn't figure out how to prevent the first row from being overlapped by the sticky header. I think this is a problem particular to putting a table in a scrolling div. Jroberson108 is an expert in those type of scrolling table divs. --Timeshifter (talk) 12:09, 28 March 2024 (UTC)

Have a look:

https://en.wikipedia.org/w/index.php?title=COVID-19_lockdowns&wvprov=sticky-header#Table_of_pandemic_lockdowns

when you click edit, you will see that I copy/pasted the "sticky header" (between accolades = { ) at the top of the table. Cheers, SvenAERTS (talk) 13:57, 28 March 2024 (UTC)

@SvenAERTS:. I consolidated the talk thread here.

I reverted your addition of {{sticky header}} to the article. {{sticky header}} was already in the table template. It adds nothing when duplicated in the article.

See: Template:COVID-19 pandemic lockdowns.

Pinging Jroberson108 from this new consolidated talk thread location.

See article section

COVID-19 lockdowns#Table of pandemic lockdowns.

--Timeshifter (talk) 16:42, 28 March 2024 (UTC)

@SvenAERTS: Yeah, it's not meant to be put in a scrolling div due to the top of the sticky header being adjusted to be below the top sticky nav bar found in the "Vector (2022)" skin. This is why there is space above the sticky headers and the scrolling data is visible above the headers. I can add a class to apply to the div to remove the spacing and apply some other styles similar to the old COVID sticky styles found at Template:COVID-19 pandemic data/styles.css.

This is the fourth table I've seen where someone put it in a scrolling div. The other ones are South Korea national under-17 football team, South Korea national under-20 football team, and South Korea women's national football team. Jroberson108 (talk) 17:46, 28 March 2024 (UTC)

@SvenAERTS and Timeshifter: I've updated the sandbox styles. See the new scrollable div class on the testcases page at:

• Template:Sticky header/testcases#Test sticky-header-scroll with sticky-header
• Template:Sticky header/testcases#Test sticky-header-scroll with sticky-header-multi

It works in my Windows 10 and Android phone browsers. If it works for you, I can move it live for article usage. If you don't like the div class name "sticky-header-scroll", then we can think up a better name. Jroberson108 (talk) 01:45, 29 March 2024 (UTC)

Looks good to me on my iphone SE 2020. In both portrait and landscape orientation. Class name is fine. Fast work. Thanks. Do we need to check with a larger iphone too? --Timeshifter (talk) 15:57, 29 March 2024 (UTC)

There's nothing added that is specific to sizes, so shouldn't be needed. SvenAERTS, do you want to look it over too? Jroberson108 (talk) 18:08, 29 March 2024 (UTC)

The new class is live now. Jroberson108 (talk) 22:38, 3 April 2024 (UTC)

@SvenAERTS: Please fix the link in your message here:

https://phabricator.wikimedia.org/T42763#9669355

The smiley face at the end is what is breaking the link. You can edit or delete your messages on Phabricator.

Overall thread:

Phabricator: T42763. Implement repeated/fixed/floating/sticky table headers.

Or delete your message there, since the problem has been solved.

--Timeshifter (talk) 03:37, 10 April 2024 (UTC)

Accessibility of scrolling tables with sticky headers

@Jroberson108: I found this site:

• https://accessibe.com/accessscan

Might be useful to test a few scrolling tables in sandboxes. Might be useful for many things.

I updated Help:Table/Advanced#Advanced scrolling tables with sticky headers.

It links to a discussion where Graham87 said they were accessible. --Timeshifter (talk) 03:40, 10 April 2024 (UTC)