MediaWiki talk:Gadget-StickyTableHeaders.css

"and firefox's sticky support seems completely broken"

It's not completely broken, but it doesn't currently work on table cells much like how you point out that Chrome's support doesn't work on <thead>. It looks like the upstream bug for that is 975644. Anomie⚔ 14:55, 28 March 2017 (UTC)

Testing...
...
...
...
...
...
...
...
...
...

Div Header

...
...
...
...
...
...
...
...
...
...

Div Footer

...
...

<th> Header
...
...
...
...
...
...
...
...
...
...
<th> Footer

...
...
...
...
...
...
...
...
...
...

Firefox 59 supports sticky headers

I know the change was made a while ago in the gadget, but release channel Firefox 59 only popped out this week. Yay! You might consider tweaking the gadget description, which says it requires Safari or Chrome.

However, it looks like Timeless doesn't play well with it? No headers are sticky. :( Vector works. --Izno (talk) 23:01, 17 March 2018 (UTC)

Still clobbers borders too, but that's a minor offense. --Izno (talk) 23:02, 17 March 2018 (UTC)

Is it that no headers are sticky, or that they "stick" underneath Timeless's own non-scrolling page header where they're not normally visible? Anomie⚔ 14:17, 18 March 2018 (UTC)

@Anomie: It looked to me (with two rows with of headers, one of which was two lines, ref test page) that they weren't sticky, not that Timeless was clobbering them. I haven't tried with three or four rows of headers. --Izno (talk) 16:22, 18 March 2018 (UTC)

Headers now sticky in Timeless. Yay. However, references apparently have a higher z-level, so the headers end up displaying with references in front. Firefox 60.0.2. Found this one on ...Baby One More Time (song). --Izno (talk) 14:44, 14 June 2018 (UTC)

So, the headers are sticky but there's something going on with some weird whitespace displayed only in monitor resolutions. (At sub-monitor resolution, no issue.) The change corresponded with a Thursday deploy I'd guess. --Izno (talk) 18:07, 28 October 2018 (UTC)

@Anomie and TheDJ: The heights were changed some while ago in Timeless. At least in Firefox, 3.3em fits a lot better for me in the resolutions above 1100px rather than the 6em in the current gadget (the whitespace above is not actually whitespace but the 'background' of the rest of the page). (The 850px-1100px region is still fail.) Would one of you mind adjusting that and/or checking Safari? --Izno (talk) 01:20, 22 November 2018 (UTC)

Bug: rowspan in headers does not propagate into table

As found at Help talk:Table#Non-rectangular tables example broken, code such as:

{| class=wikitable
!a
!rowspan=2|b
!c
|-
|x
|z
|}

a	b	c
x		z

does not leave space for column 2 in row 2 (where "b" should spread due to rowspan=2), but instead "z" is immediately adjacent to "x" and the third cell in row 2 is blank. DMacks (talk) 19:30, 28 June 2018 (UTC)

Well that's not what you are supposed to do with tables. If you stand on your head, things will be upside down. ;) —TheDJ (talk • contribs) 00:46, 29 June 2018 (UTC)

It's an example from Help:Table. And it gives valid HTML and renders correctly with the gadget off and does not appear to be forbidden or recommended against in the standards. DMacks (talk) 02:37, 29 June 2018 (UTC)

Tables are also used to layout entire pages. also allowed, renders, just not what they were made for. —TheDJ (talk • contribs) 07:53, 29 June 2018 (UTC)

@DMacks: So, I've been working to understand TheDJ's argument about why the markup in question is "wrong", and after a lot of investigation, I have to say: I agree.

The issue comes down to how the table renders into HTML, and then how the browser in turn parses that HTML. While the table "looks right" with the sticky-tables gadget turned off, that's only by pure luck, because it's already in an invalid state within the browser's DOM tree. Turning on the gadget merely exposes that invalid state. Using Special:ExpandTemplates, here's the raw HTML for that example table above:

<div class="mw-parser-output"><table class="wikitable">
<tr>
<th>a
</th>
<th rowspan="2">b
</th>
<th>c
</th></tr>
<tr>
<td>x
</td>
<td>z
</td></tr></table>
</div>

But the real problem comes in when Chrome (or any standards-compliant browser) parses that HTML. Because the first row is made entirely of <th> cells, the browser wraps a <thead> around that row. The second row, being that it only contains body cells, goes into <tbody>. Which means that the <thead> and <tbody> are not discrete, because the middle cell occupies both. That's invalid. And since the gadget manipulates the <thead> block of the table, when it's enabled the rendering of that invalid structure breaks.

In the HTML, the table can be corrected by converting the <th rowspan=2> into <td rowspan=2>. When that's done, there are no longer any pure header rows in the table, so the table is parsed as having an empty <thead> and the entire structure in the <tbody>. That's perfectly valid, and displays correctly even with the gadget enabled:

<div class="mw-parser-output"><table class="wikitable">
<tr>
<th>a
</th>
<td rowspan="2">b
</td>
<th>c
</th></tr>
<tr>
<td>x
</td>
<td>z
</td></tr></table>
</div>

a	b	c
x		z

Wikitable syntax doesn't allow mixing regular data cells into column header rows — when a row starts with ! Header !!, all of the cells are header cells even if they have || separators. But, it does allow data rows with header cells mixed into them, via scope="row". Which means that a version of our original nonrectangular table example from Help:Table which is fully compatible with the gadget would look like this:

{| class="wikitable" style="border: none; background: none;"

! scope="row" | Year
! scope="row" | Size 
| rowspan="5" style="border: none; background: none;"|
! scope="row" | Year
! scope="row" | Size 
| rowspan="5" style="border: none; background: none;"|
! scope="row" | Year
! scope="row" | Size 
|-
| 1990 || 1000<br />(est) || 2000 || 1357 || 2010 || 1776
|-
| 1991 || 1010 || 2001 || 1471 || 2011 || 1888
|-
| colspan="2" style="text-align: center;"|⋮
| colspan="2" style="text-align: center;"|⋮
| colspan="2" style="text-align: center;"|⋮
|-
| 1999 || 1234 || 2009 || 1616 || 2019 || 1997<br />(est)
|}

Year	Size		Year	Size		Year	Size
1990	1000 (est)		2000	1357		2010	1776
1991	1010		2001	1471		2011	1888
⋮			⋮			⋮
1999	1234		2009	1616		2019	1997 (est)

Here again, the table is parsed by the browser as having an empty <thead>. The entire structure is enclosed in the <tbody>, which means it's ignored by the sticky-headers gadget. -- FeRD_NYC (talk) 12:33, 5 July 2018 (UTC)

In fact, I just tested and the same thing works, and renders correctly, if scope="col" is used on the header cells instead of scope="row". Which is arguably more correct semantically, since the header cells are meant to apply to their column. -- FeRD_NYC (talk) 12:54, 5 July 2018 (UTC)

Borders in sticky headers

Border=1 is in HTML5. Rules=all and cellpadding=x are not. Just wondering if any of this might help.

---

{| class=wikitable

header 1	header 2	header 3
row 1, cell 1	row 1, cell 2	row 1, cell 3
row 2, cell 1	row 2, cell 2	row 2, cell 3

---

{|

header 1	header 2	header 3
row 1, cell 1	row 1, cell 2	row 1, cell 3
row 2, cell 1	row 2, cell 2	row 2, cell 3

---

{| border=1

header 1	header 2	header 3
row 1, cell 1	row 1, cell 2	row 1, cell 3
row 2, cell 1	row 2, cell 2	row 2, cell 3

---

{| rules=all

header 1	header 2	header 3
row 1, cell 1	row 1, cell 2	row 1, cell 3
row 2, cell 1	row 2, cell 2	row 2, cell 3

---

{| border=1 rules=all

header 1	header 2	header 3
row 1, cell 1	row 1, cell 2	row 1, cell 3
row 2, cell 1	row 2, cell 2	row 2, cell 3

---

{| border=1 rules=all cellpadding=3

header 1	header 2	header 3
row 1, cell 1	row 1, cell 2	row 1, cell 3
row 2, cell 1	row 2, cell 2	row 2, cell 3

---

It looks like rules=all might somehow solve the header borders problem. -- Timeshifter (talk) 22:36, 31 May 2019 (UTC)

border-collapse works and is HTML5 compliant

I forgot to mention I am using Firefox.

border=1 is also HTML5 compliant, and must also be used for this to work.

{| border=1 style=border-collapse:collapse;

header 1	header 2	header 3
row 1, cell 1	row 1, cell 2	row 1, cell 3
row 2, cell 1	row 2, cell 2	row 2, cell 3

By the way, for those who don't know, the table is from the "insert a table" button on the 2006 editing toolbar. A similar table can be had from clicking the table button in the advanced menu of the 2010 editing toolbar.

See: Special:Preferences#mw-prefsection-editing. There one can enable this:

• Enable the editing toolbar. This is sometimes called the '2010 wikitext editor'.

I normally have the 2006 editing toolbar (plus extensions) enabled. I have the following 3 gadgets enabled in the editing section of gadget preferences:

• Enable the legacy (2006) editing toolbar. This will be overridden by the "Enable the editing toolbar" option in the Editing tab.
• refToolbar: add a "cite" button to the editing toolbar for quick addition of commonly used citation templates
• Add extra buttons to the old (non-enhanced) editing toolbar

They just add more buttons to the 2006 editing toolbar. Unfortunately, both toolbars can not be enabled at the same time. The 2010 preference will override the 2006 preference setting. --Timeshifter (talk) 09:26, 1 July 2019 (UTC)

Row headers in sticky

You might want to take a look at what turning stick on does to the row headers in this table in Firefox. As you scroll up the page, the row headers in the bottom half of the table start to overlap and obscure those in the top of the table. SpinningSpark 18:27, 2 May 2020 (UTC)

Character	1	2	3	4	5	6
А	П
Б	Л
В
Г
Д
Е
Ж
З
И
К
Л
М
Н
О
П
Р
С
Т
У
Ф
Х
Ц
Ч
Ш
Щ
Ъ
Ы
Ь
Э
Ю
Я

This is expected. The table is not complete. The script that enhances the functionality tries to build thead/tfoot's by looking at if a row consists solely of th cells, which these last rows do. It does't do an entire cell count on the table to figure out if the table is wellformed (tablesorter DOES do this, but it's way more advanced in how it analyzes tables). —TheDJ (talk • contribs) 14:02, 1 September 2021 (UTC)

Sticky headers not working with scrollable tables (Timeless)

So, it doesn't work with Timeless anymore. While I'm really not sure how to fix this, from a brief investigation, it looks like the issue is with the css - position:sticky appears to not play well with overflow:hidden/scroll or some such, for whatever reason?

Dunno, but I'm about to have entirely too much fun attempting to implement sticky scrollbars, and as a result of this rather stupid limitation that might just need to go full CodeMirror... mind you, if this actually does turn out to work, that might actually be the way to go here for better cross-skin and -browser support anyway. Maybe. -— Isarra ༆ 21:04, 14 December 2020 (UTC)

See also: Help talk:Table#Sticky table headers?. It has some recent comments, links, and examples. --Timeshifter (talk) 00:41, 16 December 2020 (UTC)

Request update

Request to update the CSS of this gadget to the below source. This should enable the code on Chrome, but more importantly should deal with the issue of missing borders in the sticky content. It also

/* Safari 14 has an issue where table captions interfere with a proper offset */
/* Works with Chrome 91 and later */
/* Works with Firefox v59 and later */
/* Timeless has a problem on Chrome and Safari to apply the extra offset  to clear its sticky header */
/* The CSS can also be used without the gadget's JS, but in that case can only deal with header cells in the first row */

/*
 * Applies to to tablesorter and sticky header gadget created theads/tfoots.
 * These theads can be multi row.
 * If either of these were not applied, apply to the th cells of the first row.
 */
.jquery-tablesorter > thead,
.mw-sticky-header > thead,
.wikitable:not(.jquery-tablesorter):not(.mw-sticky-header) > tbody > tr:first-child > th {
    position: sticky;
    top: 0;
    z-index: 12;
}

.jquery-tablesorter > tfoot,
.mw-sticky-header > tfoot {
	position: sticky;
    bottom: 0;
    z-index: 12;
}

/*
 * Change the borders of wikitables to work without border collapse
 * Border collapse cannot be applied to sticky elements (technical restriction)
 */
.wikitable {
    border-collapse: separate;
    border-spacing: 0;
    border-bottom-style: none;
    border-left-style:none;
}

.wikitable > * > tr > th, .wikitable > * > tr > td {
    border-right-style: none;
    border-top-style:none
}

/* This additional offset seems broken in Safari and Chrome */
/* This does not always seem to work, possibly due to the absolute/relative hacking mess of timeless */
@media screen and (max-width: 1099px) and (min-width: 851px) {
	.skin-timeless .jquery-tablesorter > thead,
	.skin-timeless .mw-sticky-header > thead,
	.skin-timeless .wikitable:not(.jquery-tablesorter):not(.mw-sticky-header) > tbody > tr:first-child > th {
		top: 3.125em;
	}
}

@media screen and (min-width: 1100px) {
	.skin-timeless .jquery-tablesorter > thead,
	.skin-timeless .mw-sticky-header > thead,
	.skin-timeless .wikitable:not(.jquery-tablesorter):not(.mw-sticky-header) > tbody > tr:first-child > th {
		top: 6em;
	}
}

Also please update MediaWiki:Gadget-StickyTableHeaders to read: Make sure that headers of tables remain in view as long as the table is in view (requires Chrome 91+, Firefox v59+ or Safari) Thank you, —TheDJ (talk • contribs) 13:58, 1 September 2021 (UTC)

Ping me if I don't get to this in the next day or two. IznoPublic (talk) 02:15, 10 September 2021 (UTC)

 Done Izno (talk) 03:29, 10 September 2021 (UTC)

Interface-protected edit request on 23 July 2022

Please add the following before line 24, to let the sticky table headers take into account the sticky vector header

@media screen and (min-width: 1000px) {
	.skin-vector-2022.vector-sticky-header-visible .jquery-tablesorter > thead,
	.skin-vector-2022.vector-sticky-header-visible .mw-sticky-header > thead {
		top: 3.125rem;
	}
}

—TheDJ (talk • contribs) 11:48, 23 July 2022 (UTC)

 Done — xaosflux ^Talk 12:01, 23 July 2022 (UTC)

Error on table wrapped in style="overflow:auto"

An issue with 2022–23 NCAA Division I women's basketball rankings#AP Poll was reported at Wikipedia:Village pump (technical)#Truncated tables. In Vector 2022 the contents of the header row moves down on top of the next row when the gadget runs. Also, the header is not sticky but remains on top of the next row. The table is made with {{ColPollTable}}. Special:ExpandTemplates shows that the produced table code is wrapped in <div style="overflow:auto">...</div>. If this code is removed then the table appears to display correctly. PrimeHunter (talk) 01:46, 4 February 2023 (UTC)

Yes this is a known problem with sticky. Sticky is always relative to the first scrollcontext. So if you wrap something in an overflow:auto, your headers become relative to that, instead of the rest of the page, yet its offset is still the sticky skin header. This is one of the reasons why adding sticky headers is so problematic. —TheDJ (talk • contribs) 10:22, 4 February 2023 (UTC)

i'm wondering if CSS4 container queries could help solve that.. Something worth experimenting with. —TheDJ (talk • contribs) 10:48, 4 February 2023 (UTC)

In Vector Legacy it isn't sticky either but it's displayed in the right place at top of the table and not on top of the next row. It would be nice to at least get that in Vector 2022. PrimeHunter (talk) 15:14, 4 February 2023 (UTC)

Legacy vector doesn’t have a sticky toolbar to take into account on the offset —TheDJ (talk • contribs) 22:51, 4 February 2023 (UTC)

This still seems to be a problem. I'm using the Sticky gadget, Vector 2022 skin, and Firefox latest. I started a discussion earlier today, including screenshots, at Template talk:ColPollTable. I have created a Module:ColPollTable/sandbox which removes (I think) the overflow:auto, but still the header overwrites the first row of the table. MikeVitale 23:56, 8 September 2024 (UTC)

Proposal to add toggle

The gadget is great on many long tables but some tables display incorrectly or poorly so I haven't enabled it. Also, as an editor I often want to see what normal readers see. I have made a script User:PrimeHunter/Sticky headers.js which adds a link under "Tools" to reload the current page with the gadget code, for users who haven't enabled the gadget. I propose the gadget itself adds a disable/enable toggle, maybe only for the current page, or maybe remembering the setting until the next click. PrimeHunter (talk) 01:02, 15 February 2023 (UTC)

Agreed; that would be a nice enhancement. Mathglot (talk) 18:34, 19 March 2023 (UTC)

Sticky headers on smartphone browsers

Hey, I tried the sticky headers on the smartphone browsers of Firefox and Free Adblock browsers. Both browsers don't show the sticky headers in the mobile view of Wikipedia.

While the browser on my desktop PC shows the sticky headers in both the desktop and mobile view of WP.

https://en.wikipedia.org/wiki/List_of_Airbus_A320_family_operators

Can you make the sticky browsers work on smartphone browsers? :) WikiPate (talk) 15:38, 15 October 2023 (UTC)

Set z-index to the sticky header

If there are absolutely-positioned elements like at Corruption Perceptions Index#Rankings, the header ends up like this:

This seems to be easily fixed by setting z-index: 1; to the header (not sure about the value). Jack who built the house (talk) 10:09, 28 April 2024 (UTC)

Not working at The Economist Democracy Index#List by region

And also it distorts the table header:

Jack who built the house (talk) 17:45, 4 May 2024 (UTC)

@JWBTH: It works currently but failed at the time of the post. It happened because the table was wrapped in <div style="overflow:auto">...</div>. It also happens for {{Series overview}} which wraps the table in <div style="display:block;overflow-x:auto">...</div> and is used in 8000 pages, e.g. List of Downton Abbey episodes. It isn't sticky in any skin but it's worse in Vector 2022 and Timeless where the header rows are moved down by the gadget and cover some of the following rows as shown in File:English Wikipedia The Economist Democracy Index 2024-05-04 17-43-31.png. I don't know how to fix it. PrimeHunter (talk) 11:18, 16 July 2024 (UTC)

Interface-protected edit request on 10 September 2024

Replace gadget CSS with the below source. My testcases.

Changes made:

• Remove -webkit-sticky; doesn't seem needed anymore since 2019.
• Re-add z-index fix for Corruption Perceptions Index#2020–2023 and related.
• Fix Vector (2022) breakpoint and remove unneeded selector due to .mw-sticky-header-element.
• Fix Timeless breakpoint and top value.
• Fix some Vector (2022) and Timeless tables in overflowable boxes.
• Fix transparent sorttop/sortbottom rows after sorting; T355492.

/**
 * Make thead top and tfoot bottom sticky for JS wikitables and sortable tables.
 *
 * Issues:
 * - Broken borders. https://bugs.webkit.org/show_bug.cgi?id=128486
 * - Sticky sorttop/sortbottom after sort: T355492.
 * - Timeless wide tables in overflowable boxes, so not sticky.
 * - Mobile tables in overflowable boxes (display:block), so not sticky.
 * - Other tables in overflowable boxes not sticky without vertical scroll.
 */
@media screen {
  /* Make sticky. */
  .jquery-tablesorter > thead,
  .mw-sticky-header > thead {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .jquery-tablesorter > tfoot,
  .mw-sticky-header > tfoot {
    bottom: 0;
    position: -webkit-sticky;
    position: sticky;
    z-index: 10;
  }

  /* Adjust to other sticky elements. */
  @media (min-width: 1120px) {
    .skin-vector-2022.vector-sticky-header-visible .jquery-tablesorter > thead {
      top: 3.125rem;
    }
    .skin-vector-2022.vector-sticky-header-visible [style*="overflow"] .jquery-tablesorter > thead {
      top: 0;
    }
    .client-js.vector-sticky-header-enabled [style*="overflow"] .mw-sticky-header .mw-sticky-header-element {
      top: 0 !important; /* T289817. */
    }
  }
  @media (min-width: 851px) {
    .skin-timeless .content-table-wrapper:not(.overflowed) .jquery-tablesorter > thead,
    .skin-timeless .content-table-wrapper:not(.overflowed) .mw-sticky-header > thead {
      top: 3.51em;
    }
    .skin-timeless [style*="overflow"] .content-table-wrapper:not(.overflowed) .jquery-tablesorter > thead,
    .skin-timeless [style*="overflow"] .content-table-wrapper:not(.overflowed) .mw-sticky-header > thead {
      top: 0;
    }
  }

  /* Fix transparent sticky sorttop/sortbottom (after sort). */
  .jquery-tablesorter > thead,
  .jquery-tablesorter > tfoot {
    background-color: inherit;
  }
}

Jroberson108 (talk) 10:48, 10 September 2024 (UTC)

Regarding Remove -webkit-sticky; doesn't seem needed anymore since 2019, the assessment of whether fallback properties are required should be based on whether we have traffic from browsers requiring that fallback property, not solely on whether a standard property exists. Izno (talk) 17:31, 10 September 2024 (UTC)

Safari and Mobile Safari in the relevant range comprise about 0.3% of all page views. 0.1% is a good standard to hit for removing functionality. Izno (talk) 21:21, 10 September 2024 (UTC)

@Izno: I added position: -webkit-sticky; back and struck out the change note. Is this where you're getting your analytics: all-sites-by-os? When Safari supported a sticky <thead> might also need to be considered so a version can be added to Special:Preferences#mw-prefsection-gadgets? I came across this article stating Chrome 91 and Safari 14 is when support for a position: sticky; <thead> was added. Not sure if <thead> with -webkit-sticky was supported in prior Safari versions? Jroberson108 (talk) 02:52, 11 September 2024 (UTC)

Yes, that is where you can get stats on visits. I also use a not-so-secret website called https://steve-adder.toolforge.org/ which uses that as its source. Izno (talk) 02:53, 11 September 2024 (UTC)

@Izno: Thanks for the link. At caniuse.com/css-sticky on the "Known Issues" tab and its jsfiddle code, it says Safari 8+ supports position: -webkit-stiky; on <thead>. Not finding too much more on Safari webkit support. If that is correct, excluding the before mentioned Safari 14+, then ~0.5% of page views. Jroberson108 (talk) 05:19, 11 September 2024 (UTC)

I just saw this particular discussion, and I have added @Jroberson108's testcase edits to my common.js, and I can confirm that they fix the issues mentioned/shown at Template talk:ColPollTable. --MikeVitale 14:00, 15 September 2024 (UTC)

@Izno: Almost a month since this request. Anything more needed to help move this forward? Jroberson108 (talk) 00:32, 7 October 2024 (UTC)

Removed two selectors that weren't needed for the "fix transparent sticky sorttop/sortbottom (after sort)". Jroberson108 (talk) 17:23, 27 October 2024 (UTC)

Interface-protected edit request on 9 October 2024

On line 25, please change 1000px to 1120px. This page breakpoint got change at some point in the life of vector2022 and it was not yet updated to match. —TheDJ (talk • contribs) 08:39, 9 October 2024 (UTC)

 Done — xaosflux ^Talk 10:53, 28 October 2024 (UTC)