I have done all responsive design and devices compatibility but I have noticed an issue when there is table. How to solve this as tables are usually wider than mobile devices. Should be used mobile detection and change table columns into one column?
I’m not sure but did not find any feedback related to tables and columns.
It can be solved issue with one column but it depends on application which will show all columns.
Build you table and add class “above340” then split your table into 2 or 3 tables and add them class “view340” use media queries above340 {display:block;} view340 {display:none}. 340px is just given for example you can pick any width you need.
Tables are part of HTML and they are made to display some data so as far as you cant avoid using them you can make them responsive like above.
Cheers and GL
Did you use jGrid in the past if this is possible due to app content?
You have to decide what this data is, and how mobile users will access it, and if they have to or want to, or what.
If you have very wide and dense tables, you may want to just keep them on the page as they are and let users scroll those suckers sideways… in which case, floating/sticky column/row headers would be nice.
People are willing to scroll, even sideways, if they see a reason for it and they want that content. A table can be a good example of that… but it depends on the table data.
If it’s a two-column table, then possibly your markup wouldn’t have to be a table at all-- a definition list (keys and values) can convey the same information and are easier to deal with using media queries.
If your table is kinda in the middle in size, and very static, you could try a modified version of Chris Coyier’s responsive data tables. Due to the brittleness of this technique, I see it as a sort of last resort.
Either way, it would be good to look around for a way to offer the data in a non-table style: paragraphs or bullet lists of key points, if possible.
I used Chris’ method when making insurance bonus/malus tables because I couldn’t see another way to transmit the info, plus there was a PDF people could download for later or something.
example http://stommepoes.nl/Autoverzekeren/auto2/voorwaarden.html (ctrl-f for “Malustabel”). That table could squish down pretty good before it needed to go to the responsive tricks. The problem is if you want the header names to be dynamic, you’ll need to read them with Javascript and have them added to the DOM instead of doing it with CSS psuedo-element content.
What peterorl is talking about is, having several smaller-for-mobile tables in the markup, but hidden from Desktop users using the css media queries-- no JS necessary. So if the user is on a mobile, you simply let the many-smaller-tables present themselves, and hide the large table (or, if you’re building mobile-first, you could have only the smaller tables and use JS or something to assemble or ajax-add the larger table if the screen is larger-than-mouse-turd-size. Desktoppers/large screen users without JS or with crappy internets could still get the info from the less-glamourous smaller tables.
If the tables are things where people would only be looking up a single value from a large table, consider offering a search, like with an actual form and stuff. You could have your JS or your backend read the table and send back the data linked to the search term, presented in any non-table manner. Examples would be a table where various things like prices of plans are listed, or data going by age or location, where people tend to want to only look up the relevant row/column.