Responsive Tables & Readable Paragraphs

Chris CoyierDecember 11, 2024About 2 min

Responsive Tables & Readable Paragraphs 관련

You can make a table responsive by letting it horizontally scroll. But if you do that, make sure any paragraph style text isn't any wider than the screen.

I have this habit where when I’m watching a TV show where I like to read about it on my phone while I’m watching it. Reviews, summaries, fan theories, whatever. Seems like that would be distracting — but I think it’s extra engaging sometimes. I’d often end up on Wikipedia where they do episode informational summaries in a particular layout where the small screen layout had a horribly obnoxious side effect.

Here (was) the issue:

To their credit, they made the data table responsive in that it’s not zoomed out or cut off, you can horizontally scroll it. But horizontal scrolling is super terrible when you’re trying to read a paragraph of text.

Also to their credit, they’ve also (recently?) made this a bit better.

They put a wrapper element over the show description and added max-width: 90vw; to the styles. It was kinda funny though, as I happen to notice that and I was looking at a page where that was still a smidge too wide and it was cutting off like 50px of text so there was still a bit of horizontal scrolling needed.

The problem is that 90vw is a “magic number”. It’s essentially saying “pretty close to the width of the screen, but like, not all of it, because there is some padding and stuff the account for.” It’s just a guess. I get it, sometimes you gotta just be close and move on, but here I’ve literally seen it fail, which is the whole downside of magic numbers.

If they were trying to be perfect about it, that max-width would be set to account for all the other spacing. Something like:

.shortSummaryText {
  /* 
  Viewport width minus 1rem of body padding on each side 
  and 0.5rem of padding inside the table cell, 
  minus the borders. 
  */
  max-width: calc(100dvw - 3rem - 2px); 
}

Maybe those things are custom properties that could be grabbed, which would be even nicer. This kind of thing can be hard to maintain so I get it.

Notice in the screenshot above they also added position: sticky; and stuck it to the left side, which is a super classy touch! That way when the table is scrolled to see the other bits of information in a row, the readable paragraphs stay readable, rather than scroll over into just blank white nothingness.

I did a fork of the classic Under-Engineered Responsive Tables to include this feature.

See the Pen Under-Engineered Responsive Table (with paragraph width alteration) by chriscoyier on CodePen.

Responsive Tables & Readable Paragraphs

You can make a table responsive by letting it horizontally scroll. But if you do that, make sure any paragraph style text isn't any wider than the screen.