User:Timeshifter/Sandbox169

Testing sticky headers in scrolling tables
Return to top.

'''In iphone SE 2020, etc.. See:'''
 * Village pump (technical)/Archive 194
 * Template talk:COVID-19 pandemic data
 * Template talk:COVID-19 pandemic data/styles2.css‎
 * User:Jroberson108
 * User:Timeshifter/Sandbox127

'''Scrolling tables are in use below. The iPhone fixes have been implemented.'''
 * COVID-19 pandemic deaths
 * COVID-19 pandemic by country and territory

Style sheets:
 * Template:COVID-19_pandemic_data/styles2.css is used on the following templates: search.
 * Template:COVID-19_pandemic_data/styles.css is used on the following templates: search.

'''Tested. The sticky headers, etc. work in all 4 browsers on the iphone (Safari, Edge, Chrome, Firefox):'''
 * https://css-tricks.com/position-sticky-and-table-headers
 * https://codepen.io/aardrian/pen/GRWxrGN
 * https://www.digitalocean.com/community/tutorials/css-position-sticky - scroll down to the sharks.
 * https://adrianroselli.com/2020/01/fixed-table-headers.html
 * https://codepen.io/estelle/pen/MNwVxW
 * https://css-tricks.com/a-table-with-both-a-sticky-header-and-a-sticky-first-column
 * https://jsfiddle.net/qwubvg9m/1
 * https://codepen.io/mizukami234/pen/PoKjRyq
 * https://orangeable.com/css/fixed-table-headers

MediaWiki:Gadget-StickyTableHeaders
Return to top.

Wikipedia gadget in gadget preferences that adds sticky column headers to all non-scrolling tables.
 * MediaWiki:Gadget-StickyTableHeaders
 * MediaWiki:Gadget-StickyTableHeaders.js and MediaWiki:Gadget-StickyTableHeaders.css
 * MediaWiki talk:Gadget-StickyTableHeaders.css
 * Special:Preferences. Search for "sticky" to find: "Make headers of tables display as long as the table is in view, i.e. 'sticky' (requires Chrome v91+, Firefox v59+, or Safari)." It works in Edge too. It only works in desktop view. Unfortunately, it doesn't do sticky row headers. That would be helpful in tablets, and smaller notebooks. There are even a few tables on Wikipedia that are too wide for desktop view in regular monitors. So sticky row headers would help in that case too. Here is a page to test it on:
 * List of U.S. states and territories by incarceration and correctional supervision rate. In desktop view while on my iphone the gadget makes the column headers sticky. In mobile view while on my iphone the gadget does not make those column headers sticky.
 * Community Wishlist Survey 2022/Reading/floating table headers

Scrolling tables with iPhone fixes implemented and tested on an iPhone
Return to top.

'''Sticky headers work in all 4 browsers (Safari, Edge, Chrome, Firefox). Both for column and row headers:'''
 * Template:2022 first half. Monthly cumulative COVID-19 death totals by country
 * Template:2021 2nd half. Monthly cumulative COVID-19 death totals by country
 * Template:2021 first half. Monthly cumulative COVID-19 death totals by country
 * Template:2020 monthly cumulative COVID-19 death totals by country
 * Template:2021 monthly cumulative COVID-19 death totals by country
 * Template:COVID-19 pandemic death rates/sandbox
 * Template:COVID-19 pandemic death rates
 * Template:COVID-19 pandemic death rates by country
 * Template:COVID-19 pandemic data
 * Template:COVID-19 vaccination data
 * Template:COVID-19 vaccination data in Africa
 * Template:COVID-19 vaccination data in North America
 * Template:COVID-19 pandemic death rates by country/sandbox

For study
Return to top.


 * Help:Table