WordPress.org

Making WordPress.org

Opened 2 years ago

Closed 2 years ago

Last modified 2 years ago

#2372 closed defect (fixed)

Improve table styling in handbooks

Reported by: grapplerulrich Owned by: pento
Milestone: Priority: normal
Component: Handbooks Keywords:
Cc:

Description

The styling for the tables in the new handbook theme can be improved.

https://make.wordpress.org/themes/handbook/review/required/theme-tags/

Attachments (3)

Theme Review Team -- tables styled.png (594.8 KB) - added by williampatton 2 years ago.
theme_tags_table.png (551.2 KB) - added by dingo_bastard 2 years ago.
Tags table with updated css
2372.patch (1.1 KB) - added by dingo_bastard 2 years ago.
Removed unnecessary 0px and added background for the td[colspan="2"] table data selector

Download all attachments as: .zip

Change History (14)

#1 @samuelsidler
2 years ago

We have okay looking tables on make/polyglots, but they're generated separately. Probably worth bringing over that style or one similar.

This ticket was mentioned in Slack in #themereview by grapplerulrich. View the logs.


2 years ago

#3 @williampatton
2 years ago

Perhaps something along the lines of the table shown in the screenshot?

#4 @ocean90
2 years ago

The issue is that o2's CSS selectors are a bit to strict. The styles are only applied to article.post .entry-content table which a handbook page doesn't have. This is how it would look with the default styles: https://cloudup.com/cPMXjDAFNL3

#6 @dingo_bastard
2 years ago

I guess you've added the style I've pasted on the slack channel, just for the record I added:

table {
  /* tables still need 'cellspacing="0"' in the markup */
  border-collapse: separate;
  border-spacing: 0;
  border:1px solid #eee;
}
caption,
th,
td {
  font-weight: 400;
  text-align: left;
}
td{
  border-bottom:1px solid #eee;
  padding: 10px
}
td:first-of-type{
  width: 30%;
  border-right: 1px solid #eee;
}
tr:last-of-type td{
  border-bottom: 0;
}

Based on the inspector fiddle.

#7 @dingo_bastard
2 years ago

I've seen that you've added thead{background:#eee;} to the mix, but since there is a 'Subject tags' sub header, it would be good that that is styled as well:

table {
  /* tables still need 'cellspacing="0"' in the markup */
  border-collapse: separate;
  border-spacing: 0;
  border:1px solid #eee;
}
thead{
    background: #eee;
}
caption,
th,
td {
  font-weight: 400;
  text-align: left;
}
td{
  border-bottom:1px solid #eee;
  padding: 10px
}
td[colspan="2"] {
    background: #eee;
}
td:first-of-type{
  width: 30%;
  border-right: 1px solid #eee;
}
tr:last-of-type td{
  border-bottom: 0;
}

Screenshot is attached below.

@dingo_bastard
2 years ago

Tags table with updated css

#8 @pento
2 years ago

  • Owner set to pento
  • Resolution set to fixed
  • Status changed from new to closed

In 4716:

Breathe: Beautify (not beatify) standard table layouts.

Props dingo_bastard.
Fixes #2372.

@dingo_bastard
2 years ago

Removed unnecessary 0px and added background for the td[colspan="2"] table data selector

#9 @dingo_bastard
2 years ago

I know you've closed this, but since no patch was provided, nothing was fixed in the handbooks tables, so I submitted a patch that will make the table look like the one in the image I've attached.

Last edited 2 years ago by dingo_bastard (previous) (diff)

#10 @pento
2 years ago

Hi @dingo_bastard!

I ended up using the style from make/polyglots, as @samuelsidler suggested earlier.

I didn't include the td[colspan="2"] selector, because it felt a bit too specific to that one table - it doesn't help for tables with a different number of columns, for example.

#11 @dingo_bastard
2 years ago

Oh, ok, no problem. I'd add a class to specify the table, but there doesn't seem to be one so I just targeted the one with colspan="2".

Thanks for the clarification :)

Note: See TracTickets for help on using tickets.