Help talk:Table/Archive 8

Archive 5

Archive 6

Archive 7

Archive 8

Archive 9

Archive 10

Partially collapsed table with vertical scrolling and show/hide links?

{{COVID-19 pandemic death rates by country}}

Is there a simple way to convert this below to a partially collapsed table with vertical scrolling? Along with show/hide links?

{| class="wikitable mw-collapsible mw-collapsed"
![[COVID-19 pandemic death rates by country]]. 
|-
|{{Template:COVID-19 pandemic death rates by country}}
|}

References

The table reference will show up in the references section of the article it is in. I used {{talk refs}} here to place the references in this talk section.

There is discussion here:

• Template talk:COVID-19 pandemic death rates by country

--Timeshifter (talk) 19:41, 27 August 2020 (UTC)

@Timeshifter: This will do it

Wikitext
{| class="wikitable mw-collapsible" ![[COVID-19 pandemic death rates by country]]. |- |{{scrolling window|link=Template:COVID-19 pandemic death rates by country|height=150px|title=New articles}} |}

References

Unfortunately I may not have time to read through the discussion at present, gotta finish checking my watch list here and on meta, also multitasking with real world stuff. However, I'm fairly certain that the manual of style discourages this usage in articlespace. (please ping on reply)

𝒬𝔔 16:58, 28 August 2020 (UTC)

Thanks Quantocius_Quantotius. I added a link to Template:Scrolling window to Help:Table#Scrolling. I also added a link to Template:COVID-19 pandemic data which is one of the few scrolling tables I have seen in article space.

Is it possible with Template:Scrolling window to set it up with a link to fully expand a table? As with Template:COVID-19 pandemic data? And is it possible with Template:Scrolling window to fix the header row such that it stays visible while scrolling? As at Template:COVID-19 pandemic data.

I wish to know the minimal wikitext involved with Template:COVID-19 pandemic data to do those 2 things: Full expansion and fixed header. Template:COVID-19 pandemic data has so much wikitext. Can you pull out the basics and use it here with Template:COVID-19 pandemic death rates by country?

--Timeshifter (talk) 23:52, 28 August 2020 (UTC)

 Done, however review by a second set of eyes wouldn't hurt; I haven't really done serious css stuff for a few years now and I've managed to make a few (thankfully minor) errors in template coding in recent weeks. I took it a bit more slowly here to double check and I had a bit more time today but it's still possible I missed something.

Other than that let me know if there's any other features you want and I'll try to get to them before the end of the month. Courtesy ping to Dudley Miles since you're working on this as well.

I'm going to try to be around Sunday at least for 30 minutes if you have any immediate questions, if not you may need to wait until around the 21st to catch me again as the next two weeks should be bit busy for me, thanks. (please ping on reply)

𝒬𝔔 22:43, 4 September 2020 (UTC)

Thanks Quantocius Quantotius, but it is no longer necessary. See: User:Timeshifter/Sandbox119. --Timeshifter (talk) 01:18, 5 September 2020 (UTC)

An improved version is at Template:COVID-19 pandemic death rates. Does this look OK? Dudley Miles (talk) 08:36, 30 August 2020 (UTC)

It needs a collapse button that brings it back to the scrollable box. I asked for help here:

Template talk:COVID-19 pandemic data#Need a link to collapse it back to its original scroll box size.

Template talk:COVID-19 pandemic data/styles.css#Collapse link needed to collapse back to the original scroll box.

--Timeshifter (talk) 10:34, 30 August 2020 (UTC)

Comment. Dudley Miles and Quantocius Quantotius. Please see User:Timeshifter/Sandbox119. The scrollable table now has a sticky header row that stays visible while scrolling. --Timeshifter (talk) 01:26, 5 September 2020 (UTC)

Sticky header row problem has been solved. See:

Template:COVID-19 pandemic death rates

--Timeshifter (talk) 06:56, 6 September 2020 (UTC)

"Show all" and "Collapse" buttons are all working correctly on all of the partially-collapsed scrolling tables here:

COVID-19 pandemic by country and territory.

--Timeshifter (talk) 04:23, 29 October 2020 (UTC)

Help needed for a timeline of images

Hi, could a wiki table expert help us improve the Timeline of first images of Earth from space, please? There are more details in its Talk page. Thanks! fgnievinski (talk) 05:05, 30 November 2020 (UTC)

Sticky table headers?

Tracked in Phabricator
Task T42763

Is there a way to make the first row of a table (the header) sticky? So that it stays on screen no matter which part of the table is on screen? Otherwise reading long (and wide) tables is really hard.

--Xerces8 (talk) 14:57, 11 April 2020 (UTC)

Google pulls up some Mediawiki info on it:

https://www.google.com/search?q=mediawiki+Sticky+table+headers

--Timeshifter (talk) 17:22, 11 April 2020 (UTC)

@Xerces8: See also: Phabricator request for floating table headers. --Timeshifter (talk) 08:51, 14 April 2020 (UTC)

@Xerces8 and Timeshifter: I just came here to request the same thing, following my post at Wikipedia talk:Reliable sources/Perennial sources/Archive 3#Technical idea: make the header row of the table sticky. This would be hugely useful for pages like that one. Someone seems to have figured out how to do it at Template:2019–20 coronavirus pandemic data, but that may have involved Herculean amounts of coding (I see they've defined their own custom CSS class, I think). Does anyone have the technical expertise to solve this and add some instructions to this help page, or should we go to WP:VPT? {{u|Sdkb}} ^talk 00:28, 22 April 2020 (UTC)

• RS talk item was archived to Wikipedia_talk:Reliable_sources/Perennial_sources/Archive_3#Technical_idea:_make_the_header_row_of_the_table_sticky — GhostInTheMachine ^{talk to me} 10:45, 6 September 2020 (UTC)

Maybe ask at Template talk:2019–20 coronavirus pandemic data. --Timeshifter (talk) 00:37, 22 April 2020 (UTC)

Take a look in Template:2019–20 coronavirus pandemic data/styles.css at .covid-sticky bits. Graeme Bartlett (talk) 12:17, 22 April 2020 (UTC)

Maybe Bawolff can help. --MarioGom (talk) 12:54, 22 April 2020 (UTC)

Generally this stuff isn't mediawiki specific, but works the same as on other websites. See https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning for details on how position:sticky. That said, I'm not sure how to do sticky headers in a table that's not scrollable (using only css and no js). The Covid template works since the entire thing is in a scrollbox. I'm not fully up to date on recent CSS stuff, so maybe there's a method I am unaware of. Bawolff (talk) 01:11, 3 May 2020 (UTC)

• User preferences includes a test gadget created by TheDJ Make sure that headers of tables remain in view as long as the table is in view (requires Firefox v59 or Safari). See MediaWiki:Gadget-StickyTableHeaders.js and MediaWiki:Gadget-StickyTableHeaders.css.
• Wikipedia:Village_pump_(technical)/Archive_154#Table_header_view from February 2018
• Wikipedia:Village_pump_(technical)/Archive_170#Sticky_table_headers from November 2018.
• See {{COVID-19 pandemic data}} and the CSS in {{COVID-19 pandemic data/styles.css}} for the current "best" version.

GhostInTheMachine ^{talk to me} 10:45, 6 September 2020 (UTC)

This code will make the column headers and the row headers sticky. If there are no row headers, then omit the "left:-1px;" and "z-index:1;" styles from the first column header. It works in Chrome and Firefox browsers for Windows desktop and Android mobile devices.

{| class="wikitable" style="max-height:100vh; overflow:auto;"
|-
! scope="col" style="position:-webkit-sticky; position:sticky; top:-1px; left:-1px; z-index:1;" | StickyRowCol
! scope="col" style="position:-webkit-sticky; position:sticky; top:-1px;" | StickyCol
|-
! scope="row" style="position:-webkit-sticky; position:sticky; left:-1px;" | StickyRow
| data
|}

Example table

StickyRowCol	StickyCol	StickyCol	StickyCol	StickyCol	StickyCol	StickyCol	StickyCol	StickyCol
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data
StickyRow	data	data	data	data	data	data	data	data

Jroberson108 (talk) 22:05, 4 December 2020 (UTC)

Jroberson108. Thanks! I linked to this talk page section from here:

meta:Community Wishlist Survey 2021/Reading/Enable sticky table headers

Feel free to add this collapsed example table to Help:Table.

--Timeshifter (talk) 21:15, 7 December 2020 (UTC)

Also linked from: meta:Community Wishlist Survey 2021/Mobile and apps/Improve horizontal scroll of tables. --Timeshifter (talk) 21:26, 7 December 2020 (UTC)

Timeshifter. I am currently looking into moving the styles to a CSS file to simplify it for users. I have to do more research on the right way to add the CSS file and see if it should have it's own help page. I have the CSS file on my local and it seems to be working well. I am planning on setting class="sticky-headers" on the table with an optional class="sticky-headers-colrow" on a column header that also needs to be row sticky. Jroberson108 (talk) 22:12, 7 December 2020 (UTC)

(unindent). Jroberson108. Does this work with sortable tables too?

Also, I found this sticky table linked from the Phabricator T42763 thread:

• de:Red Hot Chili Peppers/Diskografie#Singles

And this one with sortable columns:

• de:Red Hot Chili Peppers/Diskografie#Auszeichnungen für Musikverkäufe

And class="wikitable floatable-header" here :

• Historic Forbidden/Limited Chart - Yugipedia - Yu-Gi-Oh! wiki.

--Timeshifter (talk) 03:47, 8 December 2020 (UTC)

Timeshifter. 1) Yes, it works with "sortable"; although, "sortable" doesn't work for mobile, at least on my phone. 2) The RHCP pages aren't using a table, but a chart table (de:Vorlage:Charttabelle), which looks like a table in a desktop browser, but changes in a mobile browser so that row data is displayed vertically as opposed to horizontally with the column headers listed at the top of the entire chart. In certain curcumstances, this might be a better responsive approach compared to a table; although, their header labels aren't sticky at the top and scroll out of view causing a potential disconnect with the data. 3) It looks like "floatable-header" takes a similar approach to what I did in making column headers sticky, but they didn't do anything with the row headers which scroll out of view causing a potential disconnect with the data. Also, their column headers aren't sticky on mobile, just desktop. Jroberson108 (talk) 04:37, 8 December 2020 (UTC)

Set table column width to 150px

Here's the code. Does anybody know how to set the width of column 3 to 150px? "width: 150px" for column 3 is in the code at the moment, but the browser ignores "width" and "max-width" in any column. The browser only obeys "min-width". I tried "table-layout: fixed", "word-wrap: break-word", and some other things, not having luck so far. Thanks. –Novem Linguae (talk) 16:43, 6 January 2021 (UTC)

Novem Linguae, if you look at the thread just above ("Use of em and % values in preference to px values"), you'll see Warning: Setting specific pixel sizes is deprecated, as it interferes with the ability of the browser to adjust content to suit the browser window, device size, user-end font size limits, and other constraints. It is strongly preferred to use relative sizes, in percentage or em values... Schazjmd (talk) 17:45, 6 January 2021 (UTC)

@Novem Linguae: The cells in column 3 use {{nowrap}}. This forces the column to be at least as wide as "People's Front for Democracy and Justice", so setting a smaller width has no effect. Browsers (at least my Firefox) will not respect a large width if it forces the table to be wider than the window, so setting a very large width in column 3 may have no affect unless the window is really wide or you zoom out a lot. On my screen at standard zoom this all means that width is effectively ignored in that particular column of that particular table. PrimeHunter (talk) 22:48, 6 January 2021 (UTC)

PrimeHunter, deleting {{nowrap}} worked perfectly. Thank you. –Novem Linguae (talk) 03:55, 9 January 2021 (UTC)