-
Notifications
You must be signed in to change notification settings - Fork 14
Research: Responsive Tables
Presenting tabular data responsively is one of the trickiest problems in responsive design. Often tables are added to web pages to present a complex set of data in a concise and structured format. Condensing a table for smaller viewports presents a unique challenge because both the structure and integrity of the data should be maintained while the actual appearance of the table should change significantly to meet the needs of compact viewports.
On smaller viewports, flip the table into a linear stack of rows with the title of the column on the left and the data from the row to the right.
-
Source / View Demo: Set all of the table elements to block-level and insert hard-coded column names with
:before
in CSS -
Source / View Demo: Use a series of
div
s to create a quasi-table in the markup. Retain the block-level properties of thediv
s for the responsive format and usedata-*
attributes to dynamically plug in the responsive column values - Source / View Demo: A "mobile-first" approach, in which you begin with a definition list and then style it as a table for wider viewports
- Source / View Demo: Create a linearized version of a table as a definition list using JavaScript that only displays on smaller viewports. Provide an option for switching the table back to its original form, no matter the viewport size
-
Source / [View Demo] (http://jquerymobile.com/branches/tables/docs/tables/table-reflow.html): Add a title to each of the cells using JavaScript and only show it for smaller viewports when the
td
andth
s will also be flipped todisplay: block
. Provide an option for displaying a longer title for a column when linearized using theabbr
element (this didn't work for me)
"Pin" the left-most column (or header row) and wrap the neighboring columns in a scrolling container.
- Source / View Demo: Using JavaScript, create a duplicate of the table ("pinned" table), hide every column but the first column, and position it absolutely over the original table. Hide the first column in the original column and add some margin to the left to line it up with the pinned table positioned above it
-
Source / View Demo: Float the
thead
to the left so that it acts as a pinned column (essentially flipping the table on its side) and applyoverflow-x
to thetbody
to allow for scrolling to the left and right
Create a image-based chart summary of the tabular data.
- Source / View Demo: Create a pie graph of the table data using the jQuery Visualize plugin and display the pie chart instead of the table on smaller viewports
In smaller viewports, simply switch the table to a link to view the full-sized table.
- Source / View Demo: On smaller viewports, shrink the table to a miniature version that can be clicked/tapped. Once tapped, the table expands to full width and everything else on the page is hidden
Simply hide the columns that are less important on smaller viewports.
-
Source / View Demo: Use ID selectors and
nth-child
selectors to target rows and hide those based on the viewport size -
Source / View Demo: Developer assigns "essential" and "optional" CSS classes to the
th
elements of the table. Use JavaScript to loop through the table and assign these classes to thetd
elements along with a "header" attribute that connects the cell to its parentth
. Only the "essential" classes will remain on smaller viewports. Also provide a checklist that will allow Users to add the columns back if they want to access the data, even though it won't fit - Source / [View Demo] (http://jquerymobile.com/branches/tables/docs/tables/table-column-toggle.html): Hide and display the necessary columns using JavaScript
On smaller viewports, change the table into a color-coded list of data, where column headers and column values have the same color.
-
Source / View Demo: On smaller viewports, switch everything to
display: inline
and usenth-child
selectors to add coloring to cells
On smaller viewports, hide some of the columns in a content area underneath the row and display a control for expanding/collapsing this content area.
-
Source / View Demo: Hide columns tagged with specific
data-*
attributes on smaller viewports. When User clicks the row, add another row beneath the clicked row, containing this data.
Eric on 11/11
Personally, I'd like to see a responsive table continue to use the table
tag for semantic reasons. As such, I do not like the Linearized Table Options 2 and 3. I do, however, like Linearized Table Option 1, with two caveats:
- We cannot us this method of pure CSS as they claim. The reason I say this is, looking at their markup, they explicitly set the
content
of the:before
selector - if we were to require the same, then we'd rely on the end user having to actually specify those headers themselves, which is overly cumbersome. However, a relatively simply set of Javascript can probably be used to dynamically populate these content definitions, which circumvents the problem. - They have some overflow problems when viewed on small devices where the before content does not wrap correctly. We'd probably have to make only minor changes to the
content
definition on:before
to fix this though.
While I didn't like the Pinned Column approach when I checked it out on my browser, once I hit it on my iPhone, I actually found it pretty cool. It has the advantage of not ending up creating a vast vertical scrolling space, and it also maintains the structural appearance of a table, whereas the Linearized Table does not.
My thought is that we might actually want to provide three options:
- Linearized Table - Option 1 with a Javascript component to define
content
on:before
- Pinned Scrollable Table - Basically drawn straight from the example provided
- Scrollable Table - A version of the pinned table that doesn't have the fixed first column
Logan on 11/25/12
I agree with your assessment, Eric. I think we definitely want to include a Linearized Table option and I like the idea of including a Scrollable Table with the option of pinning one of the columns.
I'm not totally sold on pinning the "index" column. I think it makes more sense to just pin the table's header row as in some of the other implementations. Thoughts?
Also, although I realize the Hiding Columns approach is arguably not the best approach here (as information is lost on smaller viewports), it has proven to be a useful and quick solution for me in the past. Any qualms about including this option as well?
Altogether we have the following requirements:
- Built with standard
table
markup - Linearized Table option
- Scrollable Table option (w/ option for pinning table header)
- Hiding Columns option (w/ menu for re-enabling hidden columns)