Responsive Table Layouts

Grid Layout using Element Queries

These table styles are a cleaned up version of some table styles from a fantasy sports web app. The original table styles were written using regular CSS @media queries, but as soon as the tables needed to be added to a layout with a sidebar or other content we had to re-do the breakpoints all the time and we ended up with a lot of duplicate code.

These tables use @element queries instead, via EQCSS.js, so the responsive breakpoints are based on the width of the <table> elements themselves rather than the width of the browser. This way this one set of responsive styles should be able to style a <table> placed into any layout.

<table data-table=col-six>
Name	X Axis	Y Axis	Z Axis	Speed	Time	Finish
Test Flight 3	77°	78°	90°	55㎧	1:20	458

<table data-table=col-five>
Name	X Axis	Y Axis	Z Axis	Speed	Time
Test Flight 2	80°	94°	30°	200㎧	0:45

<table data-table=col-four>
Name	X Axis	Y Axis	Z Axis	Speed
Test Flight 1	120°	40°	157°	1503㎧

<table data-table=col-three>
Name	X Axis	Y Axis	Z Axis	Speed	Time	Finish
Test Flight 3	77°	78°	90°	55㎧	1:20	458

<table data-table=col-two>
Name	X Axis	Y Axis	Z Axis	Speed	Time	Finish
Test Flight 2	80°	94°	30°	200㎧	0:45	18

<table data-table=col-one>
Name	X Axis	Y Axis	Z Axis	Speed	Time	Finish
Test Flight 1	120°	40°	157°	1503㎧	1:05	40