Problem

  • At some point way back in Drupal's history, someone had the brilliant idea that styling tables with a dark grey background would be great.
  • Since then (approx. Drupal ~4.x), this default styling is carried out to hundreds of thousands of Drupal sites to make them ugly.

Proposed solution

  1. Remove background-color.
  2. Simplify row border for thead and tbody.
  3. Apply table default width of 100%.

Example

CommentFileSizeAuthor
#16 css-table-block-admin.png35.24 KBsun
#15 Before.png43.17 KBtim.plunkett
#15 After.png43.5 KBtim.plunkett
#10 table-after-2.png37.53 KBjessebeach
#10 table-before.png55.96 KBjessebeach
#8 drupal8.css-table.8.patch563 bytessun
#1 css-table-after.png9.87 KBsun
drupal8.css-table.0.patch565 bytessun

Comments

sun’s picture

sun
Primary language German
Location Karlsruhe
commented
Status: Active » Needs review
StatusFileSize
new css-table-after.png9.87 KB

css-table-after.png

sun’s picture

sun
Primary language German
Location Karlsruhe
commented

Feedback, anyone? :)

jessebeach’s picture

jessebeach commented

I'm totally behind this. If you don't patch it first, I'll have it in my list to get to.

sun’s picture

sun
Primary language German
Location Karlsruhe
commented

Mmm, there's a patch in #0 already? :)

The screenshot shows after btw

Bojhan’s picture

Bojhan commented
Status: Needs review » Reviewed & tested by the community
Bojhan’s picture

Bojhan commented
Status: Reviewed & tested by the community » Needs review

Oops, yes :)

jessebeach’s picture

jessebeach commented

Doh! I was looking for a patch and for some reason just didn't see it.

@sun, one comment, will a tr tag ever not be a direct descendant of a thead tag. Or said another way, why is the direct child selector necessary?

thead > tr
sun’s picture

sun
Primary language German
Location Karlsruhe
commented
StatusFileSize
new drupal8.css-table.8.patch563 bytes

Well, as you know, history has taught me there's barely a markup situation that doesn't exist in Drupal due to its modular nature.

A nested table in a table header? Who knows?

However, I'm certainly willing to admit and accept that this would be an extreme edge-case that should probably be discouraged in the first place and for which sites need to override system.theme.css if they really want it. :)

So attached patch removes the child selector. :)

sun’s picture

sun
Primary language German
Location Karlsruhe
commented

Are we ready? :)

jessebeach’s picture

jessebeach commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new table-before.png55.96 KB
new table-after-2.png37.53 KB

Tested and working.

Before:

Screenshot of the content table before the patch. The rows have a gray background.

After:

Screenshot of the admin table after the patch. The rows no longer have a gray background.

dries’s picture

dries commented

Both are ugly, but the after is a tiny bit better. ;-)

sun’s picture

sun
Primary language German
Location Karlsruhe
commented

Heh, please bear in mind that the screenshots are showing Stark; i.e., the "anti-theme."

The goal and purpose is to see almost native browser styling in Stark. So what's ugly in reality are the browser default styles, which did not really change since the inception of the WWW (and I think that's on purpose for the most parts).

Technically, even the horizontal row borders are borderline too much styling for Stark, but removing them altogether resulted in a very weird experience, since there wasn't any visual indication of a table anymore.

In any case, the new styles are much easier to adjust and override in a theme and finally remove the weird default background color, which is the most offending part.

webchick’s picture

webchick
she/they
Primary language English
Location Vancouver 🇨🇦
commented
Status: Reviewed & tested by the community » Fixed

The after makes sense to me. Themers are constantly saying they don't want to override core's assumptions, so fewer assumptions == more betterer. :)

Can't really review the code parts, but I assume jessebeach did in her review. Therefore...

Committed and pushed to 8.x. Thanks!

sun’s picture

sun
Primary language German
Location Karlsruhe
commented

Next one in line: #1825446: Simplify and remove stone-age CSS styling for tabs :)

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
commented
Status: Fixed » Needs work
StatusFileSize
new After.png43.5 KB
new Before.png43.17 KB

This did some odd things to the Block UI in Seven.

Before:
Before.png

After:
After.png

sun’s picture

sun
Primary language German
Location Karlsruhe
commented
Status: Needs work » Fixed
StatusFileSize
new css-table-block-admin.png35.24 KB

I have to admit that wasn't intended, but I actually don't see what's broken or not to like there.

The only difference between before and after is that a border-bottom is applied to the region header table rows.

And in fact, when there are multiple blocks within a region, that provides some helpful visual guidance for as to where a region's group starts and where it ends:

css-table-block-admin.png

Thus, moving back to fixed.

Automatically closed -- issue fixed for 2 weeks with no activity.

yesct’s picture

yesct commented
Issue summary: View changes
Issue tags: -#frontend, -Front end +frontend

fixing tags so can delete the lesser used ones.