Update table styles so nhsuk-table has bottom margin

[edwardhorsford]

This fixes some inconsistency with the table styles.

The current table styles rely on a bottom margin being applied to the table element rather than nhsuk-table. The responsive table variant resets this so it has no bottom margin.

The styles include a nhsuk-table-container class that's presumably meant to wrap tables, but this is not used or documented on the design system site. I might guess it was added for a specific use case. For now I've left it, but teams shouldn't need to use it to get the correct bottom margin.

This applies some basic styles to nhsuk-table similar to how govuk-table styles it. If nhsuk-table-container can still be used.

I think this should probably have no visual impact for most users. But if any had added extra margin to account for the responsive table not having margin, then that could double. It now sets the font too - which it's possible could conflict with a non standard font.

[frankieroberto]

Might be worth opening a second PR to remove .nhsuk-table-container - looks like it’s no longer used for responsive tables at all (those use .nhsuk-table--responsive)?

Do you know about this at all @anandamaryon1?

[anandamaryon1]

Looks good to me, I've not seen the .nhsuk-table-container being used anywhere but looking at the styles it could be used to create a scrolling table?

Perhaps leave it in for now.

Based on this, the responsive table example will need both classes, so the block class adding too (.nhsuk-table), for the margin bottom.

Note to self: will need to check service manual aligns.

[colinrotherham]

Updated the reference images again (for the new sizes)

[colinrotherham]

Updated reference images again since https://github.com/nhsuk/nhsuk-frontend/pull/1170 merged

[colinrotherham]

Just reviewed this with @anandamaryon1 and we're going to get it merged

Thanks @edwardhorsford