Wide table on a phone, what do you do with it?

[ThembalethuJongile]

Hi, newbie question. My first page is a table of the football grounds I've visited: name, town, year I first went, capacity and a short note. On my laptop it looks fine. On my phone the note column squashes everything else, the words in the first column break in half and you have to zoom out to read anything.

I'm doing everything by hand, no frameworks, just one HTML file and one CSS file. Things I've found so far:

- wrapping the table in a div with overflow-x: auto so it scrolls sideways
- a media query that turns each row into a little block, with the column name written in front of each cell
- just cutting the note column on small screens

The scrolling one was easy and works, but sideways scrolling on a phone feels clumsy. The blocks version looks nicer in the examples I saw, but it seems to need the column names repeated in every cell with data attributes, which is a lot of typing for 40 rows.

What do you all do for tables on your sites? Is there a simple way I'm missing, or is it normal to just let it scroll?

[Dan Q]

Hiding information is bad (unless users can opt-in to seeing it!)

Not option 3! Hiding information on mobiles is the most-annoying solution. Although you could dynamically hide, I suppose, with a checkbox to show the missing data at the expense of side-scrolling, with some CSS like:

Code

/* When the <input type="checkbox" id="show-notes-column-checkbox"> is NOT checked,
 * we hide all the <td class="notes-column">s:
 */
body:not(:has(#show-notes-column-checkbox:checked)) .notes-column {
  display: none;
}

I like media queries!

My personal preference would be a media query, but it's more work than side-scrolling so only do it if it feels "worth it" to you. You could collapse each row into a "card" about the place you visited. Something like this: everyone.melonland.net/media-query-table-shrinking