Responsive Tables

A CSS/JS solution for tables that allows them to shrink on small devices without sacrificing the value of tables, comparison of columns.

Our solution for responsive tables requires two included files (both linked on this page): responsive-tables.css and responsive-tables.js.

The JS will help us create some new elements on small devices, so we don't have to modify our table markup on the page. The CSS applies the requisite positioning and overflow styles to make the new elements work.

/* Attach the Table CSS and Javascript */
<link rel="stylesheet" href="responsive-tables.css">
<script src="responsive-tables.js"></script>

Small Word Table

Header 1	Header 2	Header 3	Header 4	Header 5	Header 6	Header 7	Header 8
row 1, cell 1	row 1, cell 2	row 1, cell 3	row 1, cell 4	row 1, cell 5	row 1, cell 6	row 1, cell 7	row 1, cell 8
row 2, cell 1	row 2, cell 2	row 2, cell 3	row 2, cell 4	row 2, cell 5	row 2, cell 6	row 2, cell 7	row 2, cell 8
row 3, cell 1	row 3, cell 2	row 3, cell 3	row 3, cell 4	row 3, cell 5	row 3, cell 6	row 3, cell 7	row 3, cell 8
row 4, cell 1	row 4, cell 2	row 4, cell 3	row 4, cell 4	row 4, cell 5	row 4, cell 6	row 4, cell 7	row 4, cell 8

In most cases, tables like this are okay at smaller sizes (since they'll break on every small word). However, with this many columns a very small device like a phone would still be a problem.

By attaching a class of .responsive to the table, our JS/CSS will kick in.

/* Put the responsive class on the table */
<table class="responsive">
  <tr> …

Larger Content Table

Perk	Description	ID	Skill Req	Perk Req
Steel Smithing	Can create Steel armor and weapons at forges, and improve them twice as much.	000cb40d
Arcane Blacksmith	You can improve magical weapons and armor.	0005218e	60 Smithing	Steel Smithing
Dwarven Smithing	Can create Dwarven armor and weapons at forges, and improve them twice as much.	000cb40e	30 Smithing	Steel Smithing
Orcish Smithing	Can create Orcish armor and weapons at forges, and improve them twice as much.	000cb410	50 Smithing	Dwarven Smithing
Ebony Smithing	Can create Ebony armor and weapons at forges, and improve them twice as much.	000cb412	80 Smithing	Orcish Smithing
Daedric Smithing	Can create Daedric armor and weapons at forges, and improve them twice as much.	000cb413	90 Smithing	Ebony Smithing
Elven Smithing	Can create Elven armor and weapons at forges, and improve them twice as much.	000cb40f	30 Smithing	Steel Smithing
Advanced Armors	Can create Scaled and Plate armor at forges, and improve them twice as much.	000cb414	50 Smithing	Elven Smithing
Glass Smithing	Can create Glass armor and weapons at forges, and improve them twice as much.	000cb411	70 Smithing	Advanced Armors
Dragon Armor	Can create Dragon armor at forges, and improve them twice as much.	00052190	100 Smithing	Daedric Smithing or Glass Smithing

The effect is even more pronounced on a table like this one, where we detail how to craft different armor types in Skyrim (we're nerds, okay).

Notice on a small device how we maintain the left column when it has so much content.

Very Long 1st Cell Content

Header 1	Header 2	Header 3	Header 4	Header 5	Header 6	Header 7	Header 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.	row 1, cell 2	row 1, cell 3	row 1, cell 4	row 1, cell 5	row 1, cell 6	row 1, cell 7	row 1, cell 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.	row 2, cell 2	row 2, cell 3	row 2, cell 4	row 2, cell 5	row 2, cell 6	row 2, cell 7	row 2, cell 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.	row 3, cell 2	row 3, cell 3	row 3, cell 4	row 3, cell 5	row 3, cell 6	row 3, cell 7	row 3, cell 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.	row 4, cell 2	row 4, cell 3	row 4, cell 4	row 4, cell 5	row 4, cell 6	row 4, cell 7	row 4, cell 8

Finally, in this example you'll see how this works for very long first-cell content. Both the first cell and the remaining cells are independently scrollable on small devices.

We do this so we can correctly predict the height of the cells for both the pinned columns and the rest of the columns.