The Responsive Table
Getting tables right in responsive design
Making tables respond gracefully to a multitude of screen dimensions has become a challenge ever since the dawn of the mobile web. The horizontal overflow, transitional, and priority table are the three patterns that have become the standard ways of solving responsive table design.
The horizontal overflow table gives users the ability to see the whole table on a small screen by scrolling to the left and right. This pattern often keeps the first field fixed while the other fields scroll under it to provide context. The danger of this pattern is that users may not know that the table is scrollable and may not see all of the fields. For this reason, it is advised that this pattern should be designed with the most important fields in the first three columns.
The transitional table reformats its field titles at lower CSS breakpoints from a column structure to a row format. This is desirable if you want all the fields shown without having to scroll. The downside is that it diminishes field comparisons and scan-ability.
The priority table works by hiding fields on lower screen sizes. This can become very problematic if the omitted fields are crucially important. However, it is usually the most graceful way to reformat a responsive table.
