Table: Responsive classes to trigger when a table becomes stacked

[sawyerh]

The stacked table currently only becomes stacked when the viewport is narrower than the mobile-lg breakpoint. A wide table may overflow a viewport when it is wider than this mobile-lg breakpoint though.

Describe the solution you'd like

I'd like more control over when a table becomes stacked, so that I can more finely tailor the experience based on the table content. For instance, if there were responsive prefixes that could enable the stacked behavior instead:

class="usa-table tablet:usa-table--stacked"

Describe alternatives you've considered

My current solution is to apply the scrollable table styles, in addition to the stacked table styles, however this isn't ideal since some users may not notice the table is horizontally scrollable, particularly on devices that hide scrollbars.

Example

Current behavior, using a scrollable and stacked table:

(This is fake data)

Proposed behavior, using a responsive prefix, like tablet:usa-table--stacked

[mdurchholz]

This would be a great feature to have. Either this or a SCSS variable to update the stacked breakpoint variable.

CC: @mejiaj