I’m looking for a bubblegum patch for tables displayed in narrow viewports. So, I thought about display: block, 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.
Leave a Reply