### The problem:
Currently tables are highly unusable on mobile. Depending on the width of the table, most tables are cut off on the right on mobile and other small screens.
### Why it is a significant problem:
A large and growing share of readers access Wikipedia articles using mobile phones (which can be verified with the pageviews tool for some popular pages). This is why good support for mobile phones is very important. Some websites go so far as to design with an increasingly popular "mobile first" approach that ensures that the display on mobile is at least as good as the desktop one.
Tables are important content of Wikipedia, featured in many articles and often displaying very useful, well/better-structured content that is sometimes making up most of an article's content and often of high interest to the readers of the article.
This is one of a series of tasks that would allow (/ improve) converting the Events list of https://en.wikipedia.org/wiki/2020_in_science to a table as suggested on the page's talk page. It would also allow many more features and could make the article shorter for the reader and more useful. Table-features suggested there could also be useful in many other articles. However, the advantages of responsive web design in respect to tables are not limited to these new features - they would be very useful for the standard display of common, unextended, tables already. Other issues of this series are linked under "Further issues" below.
### Suggested solution:
As a solution to this problem I suggest the following responsive web design:
* When the reader taps on a table rotate the screen and show the table in fullscreen. Don't show any other content of the table except eventually preceding or succeeding text that is directly referring to the table / descriptive of the table. The tap could be anywhere on the table but there should be a small image that indicates that the table has to be taped to be viewed better.
* When the table is displayed in rotated-screen-fullscreen show a large horizontal scrollbar at the bottom if some columns are still cut off. Maybe the scrollbar could be hidden until the user taps the screen. Maybe it would be best to allow scrolling horizontally by swiping left and right - if no scrollbar is displayed to indicate that columns are cut off and that scrolling is possible there should be some other small icon/image, like a small arrow, to indicate this.
### Additional suggestions/requests beyond the basic solution:
Additionally there could be a way to "prioritize"/tag columns so that if columns are cut off on mobile (or small screens) it's not the most important columns. This could be achieved by either hiding columns with less important data (and showing a [show] button) and/or placing the "field of view" of the table so that the tagged columns are visible and the less important ones are cut off.
### Further issues:
https://phabricator.wikimedia.org/T233340 (sortability)
https://phabricator.wikimedia.org/T181452 (sortability)