Responsive v1/v3 va-table loses headers on smaller screens

[randimays]

Bug Report

• I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

<va-table>, both v1 and v3, lose the table headers on smaller screens (400px and 768px in the below screenshots). This problem exists on v1 tables in prod, and it remains in the v3 tables we are attempting to implement locally in a dev branch.

In the below screenshots (from production), the "Depart" and "Arrive" headers are missing and it's not clear what the times indicate.

This page is https://www.va.gov/pittsburgh-health-care/shuttle-schedule/.

400px

768px

1000px

What I expected to happen

I expected that the headers would stick throughout breakpoints as they have important contextual information.

DST initially suggested we set the stacked property in the table to false, but:

1. this doesn't make the headers stick throughout breakpoints
2. in some cases, the table will need to be horizontally scrolled which is not ideal
3. content is editor-controlled/dynamic (coming from Drupal) and if we set the stacked property we're setting it for every table without knowing whether it's the right solution

Slack thread with DST: https://dsva.slack.com/archives/C01DBGX4P45/p1727883538474889

Reproducing

This also happens in the Storybook for DS, but the data that is shown in the example bordered table is clear enough (perhaps) that it doesn't seem to be a big deal?

https://design.va.gov/storybook/?path=/docs/uswds-va-table--docs

Urgency

How urgent is this request? Please select the appropriate option below and/or provide details

👉🏻 This bug is not blocking work, but it is currently affecting data in production (and thus cognition / clarity of the data). I would say it is somewhat urgent but since it's an existing prod issue I'm not sure.

• This bug is blocking work currently in progress
• This bug is affecting work currently in progress but we have a workaround
• This bug is blocking work planned within the next few sprints
• This bug is not blocking any work
• Other

[caw310]

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @powellkerry @rsmithadhoc

[micahchiang]

Looks like headers get removed in a media query here. I can't remember what the decision was for this, but I checked uswds table and it doesn't seem to strip the headers on narrow widths.