Background
Many tables generated by wikitext are bigger than 320px. On a 320px screen, this causes the entire viewport to grow to the size of the table and can break the experience of the entire site. This stretches the search bar and makes the mobile site very unusable.
On Vector 2022 the large tables often overlap sidebar menus for similar reasons.
Current solution (hack)
Ths current hack only applies to mobile. It potentially could be applied to desktop.
Currently the mobile site deals with this situation by forcing the table to have width 100% and adding overflow scrolling (which is enabled by making the table a block element). This solution is not perfect as overflow-x is not fully supported across all mobile devices. To see an example of the sort of table this rule targets the table on the presidental election results page [2] provides a good example.
Per T342505 this also interferes with voice-over capabilities.
Side note: We may also want to make it possible for templates in the short term to opt out of the styling hack e.g. using a nohacks class
Long term solution
Ideally it should be possible for templates to define their own behaviour for tables on mobile devices.
There are various responsive tables [1] techniques but there is no one fit for all solution. Note some tables [2] do not even scale well on even desktop devices.
It should be possible for template editors to use media queries to style tables differently with the closure of the templating RFC [3] so that we can kill this table hack.
Other solutions are welcomed.
Further information/history
See T66516: table width is marked !important and T38936: Tables in mobile
[1] http://css-tricks.com/responsive-data-tables/
[2] https://en.m.wikipedia.org/wiki/List_of_United_States_presidential_election_results_by_state#section_1
[3] https://www.mediawiki.org/wiki/Requests_for_comment/Allow_styling_in_templates
Version: unspecified
Severity: normal