👋 Oi, mga repapips, Brian Dys here! I love music, photography, and creative stuff like UX design and art. This is a place where I collect my thoughts and works. Apart all these, I’m Jaycelle’s better half and Bryce’s dad. 🥰
I’m looking for a bubblegum patch for tables displayed in narrow viewports. So, I thought about
max-width: 100%, and
overflow-x: auto. Take a look at the examples: Example 1 shows the problem of the overflowing content of the table and Example 2 shows the quick solution.
[codepen_embed height=”621″ theme_id=”1820″ slug_hash=”Kobqa” default_tab=”result”]See the Pen Lay It on the Table by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]
A quick Google brought me to MDN’s
table page (while intently avoiding W3Schools).
And this reminder brings me back so much fun memories with “the original layout grid”.
…the <table> element should not be used for layout purposes.
Crap, right? My initial reaction was “who are they to tell me what I should or should not do”?
Gmail does it. It uses
table to layout its Spam Box.
And certainly HTML emails do it!
Don’t get me wrong – I’m not a big fan of
table for layout. I even started front-end design using
position for layout. But I couldn’t deny the real power of
table – percentages and vertical alignment.
But too bad,
table, you were killed, too, by the internet police. Just like they did W3Schools.