{"id":4725,"date":"2024-12-11T14:01:17","date_gmt":"2024-12-11T19:01:17","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=4725"},"modified":"2024-12-11T14:01:18","modified_gmt":"2024-12-11T19:01:18","slug":"responsive-tables-readable-paragraphs","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/responsive-tables-readable-paragraphs\/","title":{"rendered":"Responsive Tables & Readable Paragraphs"},"content":{"rendered":"\n

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 \u2014 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.<\/p>\n\n\n\n

Here (was) the issue:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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. <\/p>\n\n\n\n

Also to their credit, they’ve also (recently?) made this a bit better. <\/p>\n\n\n\n

They put a wrapper element over the show description and added max-width: 90vw;<\/code> 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<\/em> and it was cutting off like 50px of text so there was still a bit of horizontal scrolling needed. <\/p>\n\n\n\n

The problem is that 90vw<\/code> is a “magic number”<\/strong>. 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.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

If they were trying to be perfect about it, that max-width<\/code> would be set to account for all the other spacing. Something like:<\/p>\n\n\n

.shortSummaryText<\/span> {\n  \/* Viewport width minus 1rem of body padding on each side \n     and 0.5rem of padding inside the table cell, \n     minus the borders. *\/<\/span>\n  max-width<\/span>: calc<\/span>(100<\/span>dvw - 3rem<\/span> - 2px<\/span>); \n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
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.<\/p>\n\n\n\n
Notice in the screenshot above they also added position: sticky;<\/code> and stuck it to the left<\/code> 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.<\/p>\n\n\n\n
I did a fork of the classic Under-Engineered Responsive Tables<\/a> to include this feature. <\/p>\n\n\n\n
\n