Responsive Tables — Stack on Mobile

No JS. Keep semantic <table> for desktop; on ≤720px each row turns into a “card” with cells labeled via data-label.

Orders (striped)

Order	Date	Customer	Qty	Price	Total	Actions
#1024	2025‑10‑03	A. Nguyen	2	$19.00	$38.00	View Invoice
#1025	2025‑10‑05	M. Harper	1	$29.00	$29.00	View Refund
#1026	2025‑10‑08	S. Patel	3	$12.50	$37.50	View Invoice

Users (compact)

User	Email	Status	Role	Actions
Ashley Tran	ashley@example.com	Active	Admin	Edit Disable
Diego Rivera	diego@example.com	Pending	Member	Edit Remove
Priya Shah	priya@example.com	Active	Owner	Edit Disable

How it works: On small screens we hide thead and display each tr as a block “card”. Each td reveals its header via td::before { content: attr(data-label) }. Desktop keeps native table layout.

A11y tip: Keep concise data-label text matching header cells. For long labels, widen the label column via grid-template-columns.