Handle tables used for layout

[waldyrious]

Such tables should not be styled the same way as actual data tables. Fortunately, this is becoming rarer, but it's still found in the wild every now and then.

Note: Before working on this, I want to collect a list of pages here that demonstrate the issues with tables, so that implementations addressing this can be tested against them.

• https://sites.google.com/site/igorcarron2/cs
• http://www.soportugues.com.br/secoes/fono/fono9.php
• http://www.linuxlinks.com/article/20090624155431809/Debuggers.html
• http://www.paulgraham.com/avg.html
• http://amasci.com/miscon/coherenc.html
• https://healpix.jpl.nasa.gov/healpixBackgroundPurpose.shtml
• http://www.azores-islands.info/p/places/sao-miguel/sao-miguel.html
• http://fs2.american.edu/dfagel/www/17-19th_CenturyPhilosophers/Rousseau_On%20the%20Inequality%20among%20Mankind.html
• http://dwardmac.pitzer.edu/Anarchist_Archives/bakunin/rousseau.html
• http://www.vavatch.co.uk/books/banks/cultnote.htm

(I'll keep editing this comment to add more, and crossing out those that have since changed their source code.)

[waldyrious]

As a quick hack, removing the body { max-width: 40em } rule improves the situation a bit, but the main content can become too wide to read comfortably.

Perhaps something more drastic as hiding (with display:none) any table elements with id or class containing "sidebar" (or similar terms) could help, e.g.:

td[id*="sidebar"] { display:none; }

But this would get lots of false positives and false negatives...

[waldyrious]

Looks like there might be a nice way to flatten tables revert to HTML's original 1D flow (vertically stacked blocks). From this StackOverflow answer:

tr { display:flex; flex-wrap:wrap; }
td { width:100%; }

Or even simpler, from this other answer to the same question:

table, td { display:block; width:100%; }

That second example is basically the "collapse to blocks" approach presented as #3 in this CSS-tricks article.

Anyway, sounds promising. I just need to test it (and figure out a good heuristic for detecting tables used for page layout).