Maniphest T206762

Remove table.wikitable border property.
Closed, ResolvedPublic
Actions

Description

Every table has an extra full width border when viewed on a mobile resolution:

This styling is for over-wide tables, but those look fine without the extra border:

with	without

The styling looks fine when viewed at a tablet/desktop resolution.

Developer notes

borders currently exist on table cells and tables.

On mobile we enable horizontal scrolling by enabling tables as display block and overflow auto
This however conflicts with display table's ability to collapse borders

The border should not be removed as it breaks displays of tables such as https://en.m.wikipedia.org/wiki/Help:Sorting#Numerical_sorting_problems

We need to find a way to collapse borders on tables where two borders become aligned.

I think the table code is a little messy. When I view https://m.mediawiki.org/wiki/Help:Tables for instance in minerva, I'm seeing many tables without borders.
It seems like on the short term, yes, we can remove the border. Seems like it was added in T105596 by @kaldari (61eb842 MobileFrontend).

Details

Related Gerrit Patches:

mediawiki/skins/MinervaNeue : master

Remove outer border from overflow tables

Related Objects

Mentioned In: rSKIN78aefdc2d037: Update git submodules
Mentioned Here: rEMFR61eb842cf30f: Fix wikitable table borders
T105596: Visibility issue with wikitable on mobile site

Event Timeline

Esanders created this task.Oct 11 2018, 1:45 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 11 2018, 1:45 PM

Can you provide some links to the above screenshots?
I'll take a look.
I don't think removing these borders are an option, but we should find a way to collapse borders.

Jdlrobson moved this task from Incoming to Needs Prioritization on the Readers-Web-Backlog board.Oct 11 2018, 6:50 PM

The border should not be removed as it breaks displays of tables such as https://en.m.wikipedia.org/wiki/Help:Sorting#Numerical_sorting_problems

I fail to see how removing the border on <table> breaks the display in any way.

With borders:


wide	narrow

Without borders:


wide	narrow

If the borders on tables are meant as visual aid to suggest that the table is horizontally-scrollable, then I think that usage is debatable. The tables seem more in line with their desktop counterparts without the border imo, and given that borders exist on all <td> elements, I don't see the downside of dropping the <table> border.

Once we've addressed that, we should probably pass this to @alexhollender and ask him to review tables across the site. When I view https://m.mediawiki.org/wiki/Help:Tables for instance in minerva, I'm seeing many tables without borders.

ovasileva triaged this task as Medium priority.Oct 16 2018, 9:14 PM

Jdlrobson lowered the priority of this task from Medium to Low.Jul 31 2019, 6:55 PM

Jdlrobson added a project: patch-welcome.

Change 528110 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/skins/MinervaNeue@master] Remove outer border from overflow tables

https://gerrit.wikimedia.org/r/528110

gerritbot added a project: Patch-For-Review.Aug 5 2019, 11:45 AM

In T206762#4671852, @Jdlrobson wrote:

Once we've addressed that, we should probably pass this to @alexhollender and ask him to review tables across the site. When I view https://m.mediawiki.org/wiki/Help:Tables for instance in minerva, I'm seeing many tables without borders.

You only get the double border when the page is <720px wide, as that is when the table is set to display:block

Jdlrobson edited projects, added Readers-Web-Backlog (Readers-Web-Kanbanana-2019-20-Q1); removed Readers-Web-Backlog.Aug 5 2019, 2:45 PM

Jdlrobson moved this task from Needs Analysis to Needs Code Review on the Readers-Web-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.