Skip to content
This repository has been archived by the owner on Nov 9, 2022. It is now read-only.

Research: Responsive Tables

Jump to bottom
loganfranken edited this page Dec 15, 2012 · 25 revisions

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.

Linearized Table

Concept

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.

Implementation

  • 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 divs to create a quasi-table in the markup. Retain the block-level properties of the divs for the responsive format and use data-* 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 and ths will also be flipped to display: block. Provide an option for displaying a longer title for a column when linearized using the abbr element (this didn't work for me)

Pinned Column

Concept

"Pin" the left-most column (or header row) and wrap the neighboring columns in a scrolling container.

Implementations

  • 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 apply overflow-x to the tbody to allow for scrolling to the left and right

Chart Summary

Concept

Create a image-based chart summary of the tabular data.

Implementations

Link to Full Version

Concept

In smaller viewports, simply switch the table to a link to view the full-sized table.

Implementations

  • 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

Hide Columns

Concept

Simply hide the columns that are less important on smaller viewports.

Implementations

  • 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 the td elements along with a "header" attribute that connects the cell to its parent th. 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

Color-Coded Data List

Concept

On smaller viewports, change the table into a color-coded list of data, where column headers and column values have the same color.

Implementations

  • Source / View Demo: On smaller viewports, switch everything to display: inline and use nth-child selectors to add coloring to cells

Expand-Collapse Rows

Concept

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.

Implementations

  • 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.

Discussion

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:

  1. Linearized Table - Option 1 with a Javascript component to define content on :before
  2. Pinned Scrollable Table - Basically drawn straight from the example provided
  3. 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)
Clone this wiki locally