Page MenuHomePhabricator

Remove table.wikitable border property.
Closed, ResolvedPublic

Description

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

image.png (415×470 px, 19 KB)

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

withwithout
image.png (786×474 px, 105 KB)
image.png (786×477 px, 105 KB)

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).

Event Timeline

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:

Screen Shot 2018-10-15 at 13.12.22.png (1×946 px, 151 KB)
Screen Shot 2018-10-15 at 13.12.41.png (1×978 px, 215 KB)
widenarrow

Without borders:

Screen Shot 2018-10-15 at 13.13.24.png (1×1 px, 163 KB)
Screen Shot 2018-10-15 at 13.13.13.png (1×996 px, 210 KB)
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_WMF.

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