Open waldyrious opened 8 years ago
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...
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).
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.
http://www.soportugues.com.br/secoes/fono/fono9.phphttp://www.linuxlinks.com/article/20090624155431809/Debuggers.html(I'll keep editing this comment to add more, and crossing out those that have since changed their source code.)