3 ms·

HTML Tables don't wrap on mobile displays. If you build your site with tables for layout, it will probably have horizontal scrollbar(s) and you'll need to rewri

HTML Tables don't wrap on mobile displays. If you build your site with tables for layout, it will probably have horizontal scrollbar(s) and you'll need to rewrite it for mobile; so a CSS framework is usually a safer choice for less layout rework, unless it's a data table. HTML Tables need at least `<th scope="row|column">` to be accessible: https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced#the_scope_attribute https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/A... "CSS grid layout": https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la... lists a few interactive resources for learning flexgrid: - Firefox DevTools > INTRODUCTION TO CSS GRID LAYOUT: https://mozilladevelopers.github.io/playground/css-grid/ https://mozilladevelopers.github.io/playground/css-grid/ - CSS Grid Garden: https://cssgridgarden.com/ https://cssgridgarden.com/ MDN > "Relationship of grid layout to other layout methods": https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la... MDN: "Box alignment in grid layout": https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...

iamacyborg 3y ago
Tables absolutely can wrap on smaller displays, that’s how we used to code responsive emails.
- ozaark 3y ago
  I can't tell if you're serious or not, but tables are an absolute mess to handle layout. Email clients handle the CSS code to varying degree of support when wrapping responsively so even if you think your layout looks good with wrapping it's because CSS influenced the layout in whatever particular client you are using. If client doesn't support CSS or the CSS properties you've used: jank email. Email unfortunately requires you to code like 1999 in this regard. Browsers having CSS as standard and relatively up to date is a very good thing. Tables that aren't representation of tabular data are a mess.
  - iamacyborg 3y ago
    It's actually really simple to use tables to handle layout once you're used to it, like I said, it's what we had to do with email for a long time. It does take some css, of course, but only width and max-width. That's basically it to turn a table responsive. Add the dir attribute and you can also control the stacking order of elements. My point being, working in a constrained way (like with email) allows you to make the most of the properties available to you, and it turns out tables for layout (semantic issues aside) are easy to grok and work predictably and reliably.
quesera 3y ago
> HTML Tables don't wrap on mobile displays Sure they do. HN is, famously, rendered as tables.
- westurner 3y ago
  word-wrap: break-word in one table row cell is not the same as 20% of a 240px landscape or a 1024px IE6 display. shot-scraper supports --scale-factor, --width, --height, and --selector/-s '#elementid' with microsoft/playwright for the browser automation: https://shot-scraper.datasette.io/en/stable/screenshots.html#device-scale-factor https://shot-scraper.datasette.io/en/stable/screenshots.html...

iamacyborg 3y ago

Tables absolutely can wrap on smaller displays, that’s how we used to code responsive emails.

ozaark 3y ago
I can't tell if you're serious or not, but tables are an absolute mess to handle layout. Email clients handle the CSS code to varying degree of support when wrapping responsively so even if you think your layout looks good with wrapping it's because CSS influenced the layout in whatever particular client you are using. If client doesn't support CSS or the CSS properties you've used: jank email. Email unfortunately requires you to code like 1999 in this regard. Browsers having CSS as standard and relatively up to date is a very good thing. Tables that aren't representation of tabular data are a mess.
- iamacyborg 3y ago
  It's actually really simple to use tables to handle layout once you're used to it, like I said, it's what we had to do with email for a long time. It does take some css, of course, but only width and max-width. That's basically it to turn a table responsive. Add the dir attribute and you can also control the stacking order of elements. My point being, working in a constrained way (like with email) allows you to make the most of the properties available to you, and it turns out tables for layout (semantic issues aside) are easy to grok and work predictably and reliably.

quesera 3y ago

> HTML Tables don't wrap on mobile displays Sure they do. HN is, famously, rendered as tables.

westurner 3y ago
word-wrap: break-word in one table row cell is not the same as 20% of a 240px landscape or a 1024px IE6 display. shot-scraper supports --scale-factor, --width, --height, and --selector/-s '#elementid' with microsoft/playwright for the browser automation: https://shot-scraper.datasette.io/en/stable/screenshots.html#device-scale-factor https://shot-scraper.datasette.io/en/stable/screenshots.html...