fix: improve table layout

[fozy81]

Description

This fixes issue https://github.com/OpenDataScotland/the_od_bods/issues/102

Motivation and Context

• [x] fixed width columns
• [x] change colour paletter to single gradient instead of red/green

Other suggeted fixes:

• [ ] whitespace around the table so it doesn't spread end to end
• [ ] reduce fontsize (to allow margins)

How Has This Been Tested?

Tested locally. No units test (selenium etc written).

Screenshots (if appropriate):

Types of changes

• [x] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• [x] My code follows the code style of this project.
• [ ] My change requires a change to the documentation.
• [ ] I have updated the documentation accordingly.
• [x] I have read the CONTRIBUTING document.
• [ ] I have added tests to cover my changes.
• [x] All new and existing tests passed.

[JackGilmore]

Looks good. Would maybe suggest taking off the text-orientation: sideways property as it doesn't look to have any effect and I don't think it's compatible with many browsers: https://caniuse.com/mdn-css_properties_text-orientation_sideways

[fozy81]

I've switched to red gradient and flipped the text the other way and removed the text-orientation: sideways. Let me know if any more suggestions.

[JackGilmore]

Just looking at this and writing-mode: sideways-lr only seems to be supported by Firefox at the moment 😢 https://caniuse.com/mdn-css_properties_writing-mode_sideways_values.

You could maybe try wrapping the text in a span and then setting the following styles on the span?

writing-mode: vertical-lr;
transform: rotate(180deg);

[fozy81]

Hi @JackGilmore - thanks for catching this, I'm testing on firefox. I've updated to use rotate. So much for web standards...why can't everyone just use firefox :smiley_cat:

[JackGilmore]

@fozy81 Looks great. Cheers for the contribution Tim!