Wide tables in responsive design

Over the last couple of months I’m mostly designing admin panels and CMSs and I face an issue in terms of UI/UX. I wonder how a table with lots of column can be designed in such a way in order to look well on tablets, and even mobile devices. So far I’ve been solving this with scrolling the table column left/right should the content in the table does not fit in the limited width. Any other ideas in mind? Or maybe point me out to some design patterns.

[font=verdana]The idea of having a scrolling panel containing the table is a nice one, but it’s fraught with problems, not least of which are the complexities around getting the design working cross-browser. But the biggie for me would be the usability/accessibility problems. On a PC with a mouse, it’s relatively easy to click on the horizontal scroll arrows or drag the scroll bar to move around the table. Without a mouse, I don’t know if it’s possible at all. On a mobile or tablet, it could be very tricky. The interface there is designed to scroll the page rather than individual items. I’m pretty sure that my phone won’t cope with that kind of task, and even if more sophisticated devices do (not that you can rely on everyone having them), it won’t be easy for users to do.

On that basis, I would just allow an over-sized page that requires horizontal scrolling – while it’s not an ideal design, it is mroe likely to be user-friendly than having a scrolling panel within the page.[/font]

This might be of some interest:

I’m having trouble finding screenshots of FoxPro DOS…

http://www.scribd.com/doc/63560885/FoxPro-Programming-Using-FoxPro-2-6-or-Higher Page 20

In ol’ DOS days, one would browse tables in FoxPro in a grid: Fig. 2.8. Much like HTML tables.

But then you had the edit mode: Fig. 2.7. It was the same deal: one row bellow the other, but this time the columns were not expanding left-to-right for each row, but top-to-bottom for each row. It transformed any table in a two column table: (column name, column value).


It’s safe to assume tables will always step out the boundaries of the screen. Table grids usually work this way: vertical and horizontal scrolling. It’s your choice to opt for a vertical, a horizontal or a vertical and a horizontal scroll.