Investigate alternatives to responsiveness of tables

[sukhrajghuman]

Right now we have horizontal scrolling on smaller devices which works fine, but there could be improvments. There are other suggestions here that may be useful to implement.

The box shadow technique mentioned on here is clean: https://www.456bereastreet.com/archive/201309/responsive_scrollable_tables/

Also see:

https://community.digital.gov.au/t/table/92/2

and:

https://github.com/alphagov/govuk-design-system-backlog/issues/61#issuecomment-430300205

[sukhrajghuman]

I wanted to try and avoid using javascript for box shadows. Here is what I came up with:

Variation 1

As per the gov uk tables post above. Collapse each row in the table into a summary list:

https://codepen.io/sukhrajghuman/pen/VJEyJe?editors=1100

Variation 2

Make use of CSS gradients to add shadows in outer container edges. This doesn't work well for striped tables

https://codepen.io/sukhrajghuman/pen/VJEXMB

[gordongrace]

Summary of questions from Design Guild:

1. Could the striping for variation 2 be removed when the shadows are in use?
2. What if the shadows in variation 2 were white gradients instead?