Table headers and column contents

[kfischer]

When the mock-ups were published a lot of people commented on needing the lines between columns for orientation.

What definitely makes orientation harder is the different alignment of table headers and contents without the lines. You can see on the screenshot below that content and headers are not aligned well in a lot of cases, standing out is 'date accessioned':

[kfischer]

For me this works well/better than before. With the lines, the different alignment of headers and content doesn't create as much of a visual mismatch.

Adding 2 screenshot of the current look for people to see as this will be different than mock-ups (also lost the even-uneven-coloring I think?)

[kfischer]

I think it would be good to get more opinions here before closing.

Maybe an alternative:

• Add "striping" of the lines using background color
• Text-align the table headers left

[kfischer]

Ok, after talking to @mrenvoize: There is currently striping, but maybe I got a bad screen, because I am not seeing it... maybe it should be less subtle in coloring :)

[mrenvoize]

The contrast between even and odd rows is tiny: 1.05:1.

It's using the same colours as in master, but I do agree it's so small that I imagine it's completely lost on a lot of monitors or just lost by people's eyes.. we could certainly up it a bit somehow.

I'm not sure we need full cell borders personally.. I'd like to try it with just vertical borders to see how that looks.. I might have a bit of an experiment.

[mrenvoize]

A little experiment with striping..

• Set the background of the 'tab-content' to white (#fff) instead of transparent
• Use the background-color we use on the 'body' as the new even row highlight color (#f3f4f4)

Is that clearer to you @kfischer ?

I also had a little play with borders in that screenshot.. removing horizontal borders except for the header row and keeping only the 'border-left' for other fields (though I'd like to also drop that for the first column)

[mrenvoize]

Still only a 1.1:1 contrast ratio, but to my eye's it's much clearer and it uses a color we've already picked so is consistent.

[kfischer]

Yes, I can see that one on my screen :) I think if we are to remove the borders, which we can try, we need to have the striping stand out a bit more.

[mrenvoize]

[kfischer]

I

This is better :)

[mrenvoize]

This is the overriden CSS I ended up with in my console:

.tab-content {
  background-color: #ffffff;
}

tbody tr:nth-child(odd):not(.dtrg-group):not(.active):not(.ok) td:not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-success):not(.bg-primary) {
    background-color: #f3f4f4;
}

td, th {
    border-left: 1px solid #bcbcbc;
}

td:first-child, th:first-child {
    border-left: none;
}

Hope it helps as a clue :)

[jajm]

Hope it helps as a clue :)

Very useful, thanks!

[kfischer]

I quite like the newest version :)

• Can see the row-striping on my screen now, which makes a huge difference
• Like the removed lines between rows

Only wondering, because some tables show a line above the header row, while others (like items table on staff detail) don't:

[jajm]

I'll take a look at this

[mrenvoize]

This is starting to look really great.. sorry it's such hard work catching all cases @jajm, we really need to get more consistent as Devs with our markup.. then css changes like this would be much simpler.

[jajm]

Tables should have the same look now.

• 2 pixels border below <thead> and above <tfoot>
• No border above or below table cells (in thead, tbody and tfoot)

• No border around tables

  A few examples:

[mrenvoize]

Looks great to me now :)

[mrenvoize]

Closable.. I'm chasing any outstanding cases of a missing page-section (i.e. ensuring all tables are on a white background overall to prevent the odd highlighting getting lost against the overall page background) on other bugs.