An interesting topic in responsive design is responsive tables. This has been researched a bit and there are now even some rudimentary libraries devoted to dealing with it. In a nutshell, the problem is that wide tables with many columns are not easily viewed on a device with a small screen. So we want to find some other way to display this data in a meaningful way.
There are three general ways to tackle this problem:
- We can show and hide specific information using CSS.
- We can deliver a specifically formatted page using a server technology such as PHP.
This article discusses only the first two options.
Using CSS, it is possible to send the same data in two different formats, and make visible only the format appropriate to the viewing device. For example, we might send a larger table viewable only on a desktop computer, but make it visible only on wider screens. Then we might send a smaller table, with fewer and/or narrower columns, but make it visible only on narrower screens. The smaller table might have some data removed, some information condensed, or some information abbreviated. It is even possible to render the same information on a smaller screen using a linear format instead of a table format.
The Breakpoints page on this site uses only CSS. Specifically, it sends a table that has four columns, but no more than three columns are visible on any particular device. On a large display, the table has three colunmns with separate columns for Width and Height. On a smaller display, the table has only two columns, with a combined column for Width x Height. This is accomplished by making the various columns visible or not using CSS. At larger sizes, one of those columns (the combined data) is hidden. At smaller sizes, the combined data is shown, and the two other columns with separate width and height data are hidden instead.