Poor Table UX on Mobile

[avivkeller]

The current table layout on mobile devices has, in my opinion, significant usability issues. The table stacks headers vertically with no clear alignment to the data rows. This makes it very difficult to understand which “Data” belongs to which column.

Users can’t interpret the table without guessing the structure, which defeats the purpose of a data table.

I would expect, as a user, that the expected behavior be one following guidelines like:

• Column headers should remain horizontally aligned with their respective data cells.

• The layout should either be responsive (e.g., with horizontal scrolling) or convert to a stacked, card-style layout where each “row” is clearly broken into labeled fields.

[ovflowd]

The design was intentionally created to make the table easy to read, eliminating the need to scroll. This is why the headers are in bold. However, I believe we should improve the separation between rows to clearly indicate where one begins and another ends.

That said, I still think this orientation makes the most sense—at least that's what the UX designer who created it believed. So far, we have only received one complaint, which was about the clarity regarding where a row starts and ends.