Add horizonal scroll to table when viewing on mobile

[bick687]

Setup

• Browsers and versions: Chrome 70.0 Android
• MediaWiki version: 1.31.0
• Database version:
• PHP version: 7.0.33
• Pivot version: 2.0.0
• Extension version (if connected to the issue):

Issue

I'm trying to figure on how to add horizontal scroll to tables through CSS, as some of the tables are overflowing on mobile screens and there's no way to see the overflown data in those tables.

[Hutchy68]

There are several ways to fix this with a bit of added CSS to your wikiname.com/wiki/MediaWiki:Pivot.css page. We should add this to the pivot website.

[designnerd]

I'd love to know how, as the only method I could figure out was to manually wrap each table in:

<div class="scroll-all">Table code here</div>

With the following CSS:

.scroll-all {
    overflow:auto!important;
    -webkit-overflow-scrolling: touch;
}

[designnerd]

I finally figured out how to do this automatically without wrapping every table in a div. As it turns out you need display:block and a width statement is required for whichever direction you're wanting the scroll to work. Now all tables will scroll on our wiki. In the absence of truly responsive table layouts (hard for people to create and use as they'd have to do tables differently), this seems to be best median solution (for us) for tables that overflow on mobile.

table {
    width:fit-content; /* A width property and value is required, if that won't work use width: auto; */
    overflow:scroll;
    display:block; /* Required for scroll to work  */
    border: 0!important; /* Prevented double-dipping on boarders for our particular theme*/
}

Some other adjustments may be needed for a person's specific setup (we have lots of CSS customizations in ours and this worked perfectly for our customized setup.