Tulunk Village

I've done true responsive tables, but it's damn near impossible to do so generically. You need to decide on a static breakpoint which will always be wrong; and there's special concessions that have to be made in your markup so that the table headings are visible in the content. The idea is to abuse the display attribute to turn every row into it's own table; then inject column headings using the ::before psuedo-element and attr() to pull the heading content from a data-attribute on each cell. Which would have to be automatically injected by a MediaWiki extension or after-the-fact JavaScript... and then there's all sorts of issues with colwidth attributes which actually are the one thing you can't override in CSS.

The CSS framework Bootstrap handles this in a far less impressive manner. Their responsive table implementation just places the entire table in horizontal scroll overflow, so mobile users can scroll left and right to see the other columns, while the table itself stays in frame. It's still clunky as hell, but at least is doable. We'd probably also want some kind of sticky headings solution as well, since tables can be longer than most phones.

We'll probably want to turn the horizontal evolution trees into vertical ones.

wrote:The CSS framework Bootstrap handles this in a far less impressive manner. Their responsive table implementation just places the entire table in horizontal scroll overflow, so mobile users can scroll left and right to see the other columns, while the table itself stays in frame. It's still clunky as hell, but at least is doable. We'd probably also want some kind of sticky headings solution as well, since tables can be longer than most phones.

I actually like the sound of this. I believe it's also done this way on Wikipedia, and while not great, it seems sufficient, especially when tables are kept horizontally compact to begin with.