Responsive Tables: What Happens When the Data Doesn’t Fit?
By nature, tables of data have a rigid structure and capitalize on screen width. When screen size is limited, table data will often not fit on the screen at once. This has been an interesting challenge throughout the brief history of responsive design since a key feature with responsive design eliminates the horizontal scroll factor.
The simplest way to work with tables that exceed the width of small screens is to place them inside a scrolling container. This generally works and it allows the table structure to be maintained. The only drawback is that it results in horizontal scrolling which we are often trying to avoid in responsive design. With that said, the value of simplicity makes this option a great default setting for tables across a site. This is the method employed by popular frameworks like Bootstrap and Foundation.
More complex solutions should be used on a case by case basis for tables that require more attention. You should test the experience of using modified tables at the relevant screen sizes to catch any unexpected issues like text wrapping or overflowing.
If you are seeking to eliminate horizontal scrolling but do not mind a potentially enormous increase in vertical scrolling, the following solution may suit your needs. It is an elegant yet fairly simple solution that stacks every item within the table vertically and cleverly places a label next to each item using some css trickery. The downside to this approach is that it is not easy to scan multiple items in common categories at one time.
Choosing the Best Language for the Project: Deciding between PHP and Ruby on Rails