Update Table Components for Sizing

Description

We need to make some modifications to our Table components so that we can prevent tables from shrinking or stretching as table content changes within the page. We also want to be able to set specific widths on certain columns (i.e. keeping columns with icons tight to that content while other columns may need more space, as shown here for example).

We might look at:

• using the table-layout: fixed property on the table itself to lock it to an overall width
• allowing columns to use percentages to set width to fit a certain size
• implementing some of the functionality that was part of this (now deleted) TableWrapper component (minus the border-collapse property).

Ideally we can accomplish this without creating new components, but new components can be added if necessary.

Acceptance Criteria

• we are able to lock the table to an overall width, even if its content changes
• we are able to set columns to specific widths

Accessibility Criteria

Check the DAS guidelines on data tables

Additional Context

This conversation in mark-one might be helpful to look at as well.

• Test
• Docs

Start by reviewing the current Table components and the deleted src/client/components/layout/TableWrapper.ts, then read the linked mark-one conversation and the table-layout guidance. Done means tables retain an overall width as content changes and selected columns accept specific widths, with accessibility criteria and tests or docs addressed.