Page MenuHomePhabricator

class=mw-datatable should not override the inline background colors set for specific table rows.
Open, Needs TriagePublic

Description

Tables with background colors set per row

I want to be able to add class=mw-datatable to tables, and not lose the background colors set for rows.

Please see User:Timeshifter/Sandbox152. The table excerpt there is from the "Top scorers" section of this version of Denmark men's national handball team. It is common in many sport statistics tables to add a background color to some of the rows. In this table excerpt the rows for still active national team players are highlighted.

The first table in the sandbox is without class=mw-datatable. The second table is with class=mw-datatable. You can see how the class removes the background colors for rows and substitutes the white background color of the rest of the table data cells.

Tables with background colors set per data cell

class=mw-datatable respects the inline background color when that color is set per data cell. For example; on the many tables that use a color gradient template on a per cell basis. For example; see the rate column in the main table in this version of List of countries by intentional homicide rate. That main table uses class="mw-datatable wikitable" and it is not a problem. The background colors set per cell remain.

Why it is important

class=mw-datatable (usually combined with class=wikitable) is used more and more. It produces a white background color that is preferred by many for statistic tables. Due to the better contrast and readability for many people. Versus the light gray background color of class=wikitable used alone. Plus class=mw-datatable will highlight the row that the cursor hovers over. Making it easier to scan across that row, especially if it is a long row.

Also, if this is fixed, then this row numbers auxiliary template can be used on more tables, especially sport statistic tables: Template:Static row numbers table. It uses class="mw-datatable wikitable". This template is used with: Template:Static row numbers. The 2 templates together make setting up row numbers on a table very fast.

Event Timeline

Aklapper changed the task status from Open to Stalled.Jun 11 2021, 7:56 AM

Hi @Timeshifter, I'm afraid I'm unable to follow. Is this a bug report about changed software behavior? Is this a report about incorrect non-canonical documentation on some wiki out there? Is this a support request how to do things? Could you please see and follow https://www.mediawiki.org/wiki/How_to_report_a_bug when creating tickets, and provide 1) a list of steps to reproduce (step by step) including a link, 2) what should happen, 3) what happens instead, in separate sections? Thanks!

Timeshifter renamed this task from class=mw-datatable overrides the inline background color set for a table row. It shouldn't. to class=mw-datatable should not override the inline background colors set for specific table rows. .Jun 11 2021, 5:40 PM
Timeshifter updated the task description. (Show Details)

Hi @Aklapper. I rewrote the task. I hope it makes more sense. I used sections. I did not know it was possible to use sections. I guessed correctly that equal signs would do it. As an aside, I wish that only wikitext was used for editing in Phabricator.

Aklapper changed the task status from Stalled to Open.Jun 11 2021, 6:00 PM

class=mw-datatable (usually combined with class=wikitable) is used more and more.

I hate to bear bad news, but it is not intended to be used this way (it is intended for special pages, e.g. Special:ProtectedPages), it's currently included in a "legacy" stylesheet, and may go away at some point. See T278374 for more about this.


As for the issue at hand, it looks like the code doesn't override the background intentionally, but it happens this way because of how HTML rendering works – you set the background for the table row in inline CSS, while the datatable code sets background for table cells, and cells are painted on top of rows (which are themselves painted on top of tables).

You can find the code here: https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.pager.tablePager/DataTable.less

This doesn't look like an intentional decision (I tracked it down to this commit from 2006: 6fb88481 / https://www.mediawiki.org/wiki/Special:Code/MediaWiki/16107), so it could probably be changed. Especially if you're willing to write the patch ;)

Thanks, for the breakdown, matmarex. Whatever it was intended for originally, mw-datatable has long ago taken on a life of its own. Isn't that the case with a lot of code?

So, hopefully the coding powers-that-be don't delete it. Are you saying that mw-datatable could be changed to respect the color of individual cell backgrounds?

White main-table background is much more readable in almost all cases. Look at this phabricator page. The main text has a white background.

Quotes in tables are fine with a light gray background. Especially since the quote table will not usually have a header to further distinguish the quote. So only the border and the light-gray background sets off the quote from everything else.

But data tables have headers with background colors. So a table doesn't need further background shading of the main part of the table to distinguish it. The reader immediately knows it is a table due to the headers showing up first when scrolling down the page.

Then the white background of mw-datatable makes the main part of the table so much more pleasant to read. Light gray muddies the contrast.

@Krinkle wrote up a template style to add row hover highlighting and a white background. See:
Template:Import-blanktable

I tested it on the examples in the task description. It works fine. It respects the background colors written for cells or for rows. I don't understand though why it respects the background colors set for rows, but class=mw-datatable does not.

I believe I explained that in my previous comment:

As for the issue at hand, it looks like the code doesn't override the background intentionally, but it happens this way because of how HTML rendering works – you set the background for the table row in inline CSS, while the datatable code sets background for table cells, and cells are painted on top of rows (which are themselves painted on top of tables).

Krinkle's template sets the background on rows, so overriding it on rows works.

See: T287997. Community expectation that mw-datatable styles are loaded on pages which use it.

The mw-datatable alternatives there work without overriding background colors set for cells or rows.