Creating Responsive Tables
Data tables are one of the more challenging content elements to present responsively. Content must be legible and scannable on small screens to be effective. In many cases, tables will not fit in the traditional format on small screen sizes. Some tables, especially those with a large quantity of data, pose the greastest challenge for web designers using responsive techniques. Experienced responsive developers have come up with a variety of methods to address the table issue.
Here are two CSS solutions for responsive data tables that are currently used on the UVM website and can be effective with many HTML tables. Contact the Web Team to explore alternate solutions if neither method works with the tables used on your site.
Tables with Column Headers
If column headers are required to describe the data in your table, you may need to partially linearize the data to fit on mobile phones. This is purely a CSS method and relies on the data-label attribute to present the data linearly when screen size falls below a given threshhold. In this method, zebra-striping
is also applied to visually separate your rows of content on smaller screens. On larger screen sizes the table is presented in in a traditional table format. While it might take you a little longer to code your tables in order to use this method, the table's content will be usually be presented in a very usable format regardless of screen size.
To use this responsive technique apply the class responsive to your table tag. You may also choose to apply the a visual design to the table, the following example uses the uvmtable class in addition to the responsive class. Additionally, you must include <tbody> and <thead> sections to your table and apply header information to each data cell. See example:
<table class="uvmtable responsive"> … <td data-label="Price">$1.38</td>
Example table using the responsive class:
| Code | Company | Price | Change | Change % | Open | High | Low | Volume |
|---|---|---|---|---|---|---|---|---|
| AAC | AUSTRALIAN AGRICULTURAL COMPANY LIMITED. | $1.38 | -0.01 | -0.36% | $1.39 | $1.39 | $1.38 | 9,395 |
| AAD | ARDENT LEISURE GROUP | $1.15 | +0.02 | 1.32% | $1.14 | $1.15 | $1.13 | 56,431 |
| AAX | AUSENCO LIMITED | $4.00 | -0.04 | -0.99% | $4.01 | $4.05 | $4.00 | 90,641 |
| ABC | ADELAIDE BRIGHTON LIMITED | $3.00 | +0.06 | 2.04% | $2.98 | $3.00 | $2.96 | 862,518 |
| ABP | ABACUS PROPERTY GROUP | $1.91 | 0.00 | 0.00% | $1.92 | $1.93 | $1.90 | 595,701 |
| ABY | ADITYA BIRLA MINERALS LIMITED | $0.77 | +0.02 | 2.00% | $0.76 | $0.77 | $0.76 | 54,567 |
| ACR | ACRUX LIMITED | $3.71 | +0.01 | 0.14% | $3.70 | $3.72 | $3.68 | 191,373 |
| ADU | ADAMUS RESOURCES LIMITED | $0.72 | 0.00 | 0.00% | $0.73 | $0.74 | $0.72 | 8,602,291 |
| AGG | ANGLOGOLD ASHANTI LIMITED | $7.81 | -0.22 | -2.74% | $7.82 | $7.82 | $7.81 | 148 |
| AGK | AGL ENERGY LIMITED | $13.82 | +0.02 | 0.14% | $13.83 | $13.83 | $13.67 | 846,403 |
| AGO | ATLAS IRON LIMITED | $3.17 | -0.02 | -0.47% | $3.11 | $3.22 | $3.10 | 5,416,303 |
Tables without Column Headers
If your table has row header cells, no headers, or if header cells are not required to give context to the cells, the table can be simply linearized for optimal presentation on smaller screens. On larger screen sizes the table is presented in a traditional table format. Special coding of the table's HTML is not usually required.
To use this responsive technique apply the class responsive2 to your table tag. Example:
<table class="uvmtable responsive2">
A table with row headers:
| Row 1 Header | Row 1 Cell 2 | Row 1 Cell 3 | Row 1 Cell 4 | Row 1 Cell 5 |
|---|---|---|---|---|
| Row 2 Header | Row 2 Cell 2 | Row 2 Cell 3 | Row 2 Cell 4 | Row 2 Cell 5 |
| Row 3 Header | Row 3 Cell 2 | Row 3 Cell 3 | Row 3 Cell 4 | Row 3 Cell 5 |
| Row 4 Header | Row 4 Cell 2 | Row 4 Cell 3 | Row 4 Cell 4 | Row 4 Cell 5 |
| Row 5 Header | Row 5 Cell 2 | Row 5 Cell 3 | Row 5 Cell 4 | Row 5 Cell 5 |
A table without headers:
| Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 | Row 1 Cell 4 | Row 1 Cell 5 |
| Row 2 Cell 1 | Row 2 Cell 2 | Row 2 Cell 3 | Row 2 Cell 4 | Row 2 Cell 5 |
| Row 3 Cell 1 | Row 3 Cell 2 | Row 3 Cell 3 | Row 3 Cell 4 | Row 3 Cell 5 |
| Row 4 Cell 1 | Row 4 Cell 2 | Row 4 Cell 3 | Row 4 Cell 4 | Row 4 Cell 5 |
| Row 5 Cell 1 | Row 5 Cell 2 | Row 5 Cell 3 | Row 5 Cell 4 | Row 5 Cell 5 |
Last modified January 04 2013 09:59 PM