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 |