Make tables responsive

Tables are a real challenge to make responsive. Because the tables might be really big, I assume there are a few techniques that we could apply.

1. Remove columns, which would remove less important columns. I don't see this as a good approach.
2. No more tables, which would mean that we display the elements as blocks underneath each other.
3. Scroll tables, which would mean that the heading would move from the top to the left, and the table is scrollable.

Yeah, I created the issue and Lewis told me that there was going to be a discussion to find best approach. We'll figure it out tomorrow. If we'd go for a table flip, a table could look like this (did a small implementation - so, far from perfect - where the table is scrollable):

https://drupal.org/project/responsive_tables was mentioned by Dave Reid in the preceding issue #1599128: Responsive Table Solution

Instead of trying to get a table layout to work on smaller screens we should consider restructuring the data to be more readable.

My company has used this on a few sites http://johnpolacek.github.io/stacktable.js/ and it turns a table row into a vertical list with headings.

I was looking on Drupal.org and you can see this technique is already used on the user dashboard page to save space. https://drupal.org/user/*/dashboard

Getting back to my first comment, the solution above would be option 2 from my first comment, were we display a table as a block. Kinda 'easy' for when there are no table headings, but the real challenge here is when there a table headings. You'd have to repeat those for every block as well. As an example:

A B C D
1 2 3 4
Z X Y W

would become:

A 1
B 2
C 3
D 4

A Z
B X
C Y
D W

So I think you'd have to repeat those heading, unless I'm missing something here?

#6 looks to be a nice solution and works well with table headers as it can be seen at the project page

Ah - yeah, sorry. I did miss something! ;)

Here is also a working version of #6 and #7 http://codepen.io/geoffyuen/pen/FCBEg

I hacked away at the views table plugin and this patch now adds data-th attributes to all table cells in views :) We would still need to do more stuff to get the same for non-views tables but this is a good start.

Nice one, I am adding a small bit of JS and CSS for it now \o/

Added some more examples of pages with tables.

Added JS to calculate when the responsive tables should kick in depending on the width of the table. A class is added when the table width hits equal to or more than the screen width. The CSS (the nice easy bit) will join later tonight.

Patch updated and complete, test away!

Found a problem with the project usage page, you can probably just remove some CSS for mobile to get it looking ok https://sprint5-drupal.redesign.devdrupal.org/project/usage/views

Forums also look weird

Fixes added:
- Disabled responsive tables here https://sprint5-drupal.redesign.devdrupal.org/project/usage/views and on .../forum until data attributes can be added.
- Wrong colours on pink issue status boxes.
- Issue queue roq fixes : added styles for project name and changed first cell to have bold styles rather than specific content.
- Removed whitespace error.