Table headers not for columns only?

[scruffy]

I am using the Table stack (not the CSV one) and trying to format for horizontal rows (rather than vertical columns). That is the example on the right in the image attached.

The stack clearly supports headers (TH) for columns. But how do I get aa row header? Quite apart from formatting, I’ll never get it through accessibility testing without it.

THX

[elixirgraphics]

Click on the cells you wish to make into headers and then click the “Header Cell” option:

[scruffy]

Perfect. Thanks Adam. This next point may be a bit of a stretch, though…

Now we have rows with a row header for each, I want them to stack on mobile. That is, each row header appears immediately above the cell data (and so on).

I know FlatPack (from Stacks4Stacks) does this. I can do it myself using CSS:

table {border-collapse: collapse;}
th {display: block;}
td {display: block;}

but I am unclear about the media queries you are using for mobile. Can you help me out there?

Cheers.

[scruffy]

Actually, I just stacked at <576px. Worked great. Cheers.

[elixirgraphics]

Foundry uses the standard Bootstrap v4 breakpoints for sm, md, and lg (with very minor tweaks).

@media (max-width: 47.9375em) {
}

@media (min-width: 48em) and (max-width: 61.9375em) {
}

@media (min-width: 62em) {
}