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
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 thismobile-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:
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