Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.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
- Remove background-color.
- Simplify row border for thead and tbody.
- Apply table default width of 100%.
Example
- Table in issue summary in #1813760: [meta] Clean up @todos and deprecated code overrides drupal.org's (un)styled tables to use these sane defaults.
| Comment | File | Size | Author |
|---|---|---|---|
| #16 | css-table-block-admin.png | 35.24 KB | sun |
| #15 | Before.png | 43.17 KB | tim.plunkett |
| #15 | After.png | 43.5 KB | tim.plunkett |
| #10 | table-after-2.png | 37.53 KB | jessebeach |
| #8 | drupal8.css-table.8.patch | 563 bytes | sun |
Comments
Comment #1
sunComment #2
sunFeedback, anyone? :)
Comment #3
jessebeach CreditAttribution: jessebeach commentedI'm totally behind this. If you don't patch it first, I'll have it in my list to get to.
Comment #4
sunMmm, there's a patch in #0 already? :)
The screenshot shows after btw
Comment #5
Bojhan CreditAttribution: Bojhan commentedComment #6
Bojhan CreditAttribution: Bojhan commentedOops, yes :)
Comment #7
jessebeach CreditAttribution: jessebeach commentedDoh! I was looking for a patch and for some reason just didn't see it.
@sun, one comment, will a
trtag ever not be a direct descendant of atheadtag. Or said another way, why is the direct child selector necessary?Comment #8
sunWell, 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. :)
Comment #9
sunAre we ready? :)
Comment #10
jessebeach CreditAttribution: jessebeach commentedTested and working.
Before:
After:
Comment #11
Dries CreditAttribution: Dries commentedBoth are ugly, but the after is a tiny bit better. ;-)
Comment #12
sunHeh, 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.
Comment #13
webchickThe 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!
Comment #14
sunNext one in line: #1825446: Simplify and remove stone-age CSS styling for tabs :)
Comment #15
tim.plunkettThis did some odd things to the Block UI in Seven.
Before:
After:
Comment #16
sunI 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:
Thus, moving back to fixed.
Comment #18
YesCT CreditAttribution: YesCT commentedfixing tags so can delete the lesser used ones.