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.

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.

If you want to know how it picks what row to use, here’s how it works:

  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

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