Set 'vertical-align:top' positioning on table headers and cells #1064
Conversation
|
as we don't build a preview app from external PR, the visual change is before: after: this would be a change from Elements |
|
@igloosi In the second screenshot, January should be aligned to the top as well. |
|
Here is my before and after from a table in the design system.
|
|
I believe we consider this a breaking change so going to attach a v3.0.0 release milestone to it for now. |
kr8n3r
changed the title
vertical-align:top on tab;evertical-align:toppositioning on table headers and cells
kr8n3r
changed the title
vertical-align:toppositioning on table headers and cells
| @@ -22,6 +22,7 @@ | |||
| padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) 0; | |||
| border-bottom: 1px solid $govuk-border-colour; | |||
| text-align: left; | |||
| vertical-align: top; | |||
There was a problem hiding this comment.
I wonder if we should only vertically align top for cells?
And consider vertically aligning bottom for headers (or doing nothing)?
There was a problem hiding this comment.
We've just hit this (when converting our existing table templates to the Design System code).
The default of middle is definitely weird - there’s very few circumstances where that looks right.
Our current behaviour is to vertically-align headers to the top, partly because that makes most sense with our 'sortable' indicator, and partly because they sometimes have a parent header above them, which it’s good to be close to.
Eg see:
Both top and bottom are valid options though, so whichever one is picked for the default, it would be good to have an override, eg govuk-table__header--vertical-align-top. Same for cells probably?
|
Got this merged in #1345 :) |
Added
vertical-align: topfor table headers and table cells.At the moment, content is vertically aligned to the centre of the cell, which means the content starts at different places depending on the row height.
This is harder to scan and read for all users and means a screen magnifier user may not be able to see the contents of the cell without scrolling down and then up to read the next cell. Also, I believe it is a typographic convention in printed documents to align content to the top of the cell.
I think
topshould be the default for all tables but this could be a table class. If that what would be preferred, I could update the PR and when it is merged update the GOV.UK Design System documentation too.