User:Timeshifter/Sandbox169
Jump to navigation
Jump to search
Testing sticky headers in scrolling tables
[edit]In iphone SE 2020, etc.. See:
- Wikipedia:Village pump (technical)/Archive 194#Sticky table headers not working on iPhone
- Template talk:COVID-19 pandemic data#iPhone fixes
- 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.
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
[edit]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#mw-prefsection-gadgets. 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.
- Meta: Community Wishlist Survey 2022/Reading/floating table headers
Scrolling tables with iPhone fixes implemented and tested on an iPhone
[edit]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