University of Vermont

UVM Self-help Web Guide

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