Improve table styling in handbooks

[grapplerulrich]

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

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

[samuelsidler]

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

[williampatton]

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

[ocean90]

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

[grapplerulrich]

The source code for the parent theme and child theme can be found here
Parent: ​https://wpcom-themes.svn.automattic.com/p2-breathe/
Child: ​https://meta.svn.wordpress.org/sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-breathe/

[dingo_bastard]

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.

[dingo_bastard]

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]

Tags table with updated css

[pento]

In 4716:

Breathe: Beautify (not beatify) standard table layouts.

Props dingo_bastard.
Fixes #2372.

[dingo_bastard]

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

[dingo_bastard]

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.

[pento]

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.

[dingo_bastard]

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