Page MenuHomePhabricator

Remove table.wikitable border property.
Closed, ResolvedPublic

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:

withwithout

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 : masterRemove outer border from overflow tables

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
Jdlrobson updated the task description. (Show Details)Oct 11 2018, 6:49 PM
Jdlrobson added a project: Readers-Web-Backlog.
Jdlrobson added a subscriber: Jdlrobson.

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.

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:

widenarrow

Without borders:

widenarrow

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.

Jdlrobson renamed this task from Small tables have double border on mobile to Remove table.wikitable border property..Oct 16 2018, 7:31 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a subscriber: kaldari.
Jdlrobson added a subscriber: alexhollender.

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

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

Change 528110 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Remove outer border from overflow tables

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

Esanders claimed this task.Aug 10 2019, 3:42 PM
ppelberg closed this task as Resolved.Sep 3 2019, 12:39 AM