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.
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.