Responsive Tables Examples

Intro

We’ve written some javascript code to format (almost!) any table on dixie.edu to be mobile friendly. Depending on the structure of your table, it will try its best to find the table header row that describes the table data, and use a data-attribute on each cell’s :before element to add the header to each cell. View this page in mobile to see how it works.

Data Tables vs. Layout Tables

This code is designed for data tables – tables meant to show data, not layout tables. Tables are not meant for layout, but in certain scenarios you may find you need a table to line up your items correctly.

Simply add the class “no-table-header” to your table, and the script will ignore your table. The cells will still resize for mobile, but no table header data will be appended.

Troubleshooting Issues

Unfortunately javascript can’t read minds or understand user intention. It makes it best guess about which row is your table header, and adds that data where it thinks it should go.

If your table is rendering funny, pick a table from below that resembles your table in structure, and view the table in your browsers code inspector to see how it’s structured.

We’ve outlined the scripts logic below:

  1. Does your table have more than one column?
    If yes, continue. If not, don’t do anything.
  2. Does your table have a thead element?
    If Yes, then grab the last row in the thead to not have a colspan.
    If the thead has extra rows, hide (on mobile) any rows that have a colspan smaller than the length of the table rows.
  3. If not, does your table have two tbodies?
    If yes, treat the first tbody as a thead.
  4. If no thead or tbody(same thing as one tbody):
    Grab the first row to not have a colspan.
  5. For all tables:
    If the tbody has rows that have a colspan smaller than the length of the table rows (and bigger than 1) hide it on mobile.
    If any cell is empty, hide it on mobile.
    Hide the row used as the table header on mobile.

Examples

table with thead & tbody, thead contains 1 row with same # of cells as body

Pet Name Pet type color age eye color size weight texture
Yuki cat white 11 blue big 15 lbs soft
Baby cat black 2 yellow small 5 lbs softer
Buddy Mantis green 1 green tiny .1 lbs scales

single column table with thead & tbody

Header

test
test
test
test
test

layout table with “no-table-header” class

Monday’s Super Event

9AM breakfast
10AM lecture
12PM lunch
2PM volleybal contest
4PM juggling lesson

table with thead,tbody & one column header row

My Pets:
Yuki cat white 11 blue big 15 lbs soft
Baby cat black 2 yellow small 5 lbs softer
Buddy Mantis green 1 green tiny .1 lbs scales

table with thead,tobdy, missing td in row & empty cells

Pet type color age eye color size
Yuki cat white 11 blue 15 lbs soft
Baby cat black 2 yellow small softer
Buddy Mantis green 1 green .1 lbs scales

table with thead & tbody. thead contains three rows: single column, single header row, regular header

My Pets:
some attributes some attributes
Pet Name Pet type color age eye color size weight texture
Yuki cat white 11 blue big 15 lbs soft
Baby cat black 2 yellow small 5 lbs softer
Buddy Mantis green 1 green tiny .1 lbs scales

table with tbody, no thead. Header is a row outside tbody

Pet Name Pet type color age eye color size weight texture
Yuki cat white 11 blue big 15 lbs soft
Baby cat black 2 yellow small 5 lbs softer
Buddy Mantis green 1 green tiny .1 lbs scales

table with no thead or tbody. Header is first row of table

Pet Name Pet type color age eye color size weight texture
Yuki cat white 11 blue big 15 lbs soft
Baby cat black 2 yellow small 5 lbs softer
Buddy Mantis green 1 green tiny .1 lbs scales

table with no thead or tbody and 3 header rows, my pets, real header & some attributes

My Pets
Pet Name Pet type color age eye color size weight texture
some attributes some attributes
Yuki cat white 11 blue big 15 lbs soft
Baby cat black 2 yellow small 5 lbs softer
Buddy Mantis green 1 green tiny .1 lbs scales