qompile
Version:
Compile HTML plus dynamic styles and convert to HTML and CSS
304 lines (294 loc) • 18.7 kB
HTML
<html><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Tables</title>
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,700,300italic,400italic,500italic,700italic|Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic|Source+Code+Pro:300,400,500,600,700,900" rel="stylesheet">
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/67439/basic.css" rel="stylesheet" data-populated="true">
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/67439/data-buttons.css" rel="stylesheet" data-populated="true">
<style>
html,
body {
background: #eee;
}
[data-table] {
font-size: 12pt;
width: 100%;
font-family: 'Source Sans Pro', sans-serif;
margin: 1em 0;
color: #333;
border-collapse: collapse;
}
[data-table] thead th,
[data-table] tfoot th {
color: #777;
background: rgba(0,0,0,.1);
}
[data-table] caption {
padding: .5em;
}
[data-table] th,
[data-table] td {
padding: .5em;
background: white;
border: 1px solid #aaa;
}
[data-table] tbody tr:nth-of-type(even) {
background: rgba(0,0,0,.05);
}
</style>
<link href="tables-external.css" rel="stylesheet"></head><body><h1>Responsive Table Layouts</h1>
<h2>Grid Layout using Qompile</h2>
<p>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 <code>@media</code> 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.</p>
<p>These tables use <code>containerQuery()</code> instead, via <a href="http://github.com/tomhodgins/qompile">Qompile</a>, so the responsive breakpoints are based on the width of the <code><table></code> elements themselves rather than the width of the browser. This way this one set of responsive styles should be able to style a <code><table></code> placed into any layout.</p>
<br>
<!-- Six Col -->
<table data-table="col-six" data-datatablecoleleloffsetwidth500at1="0" data-datatablecoleleloffsetwidth500at101="0" data-datatablecoleleloffsetwidth500at201="0" data-datatablecoleleloffsetwidth500at301="0" data-datatablecoleleloffsetwidth500at401="0" data-datatablecoleleloffsetwidth500at501="0" data-datatableeleloffsetwidth500at601="0" data-datatableel500eloffsetwidthat601="0" data-datatableeleloffsetwidth500at701="0" data-datatableel500eloffsetwidthat701="0" data-datatableeleloffsetwidth500at801="0" data-datatableel500eloffsetwidthat801="0" data-datatableeleloffsetwidth500at901="0" data-datatableel500eloffsetwidthat901="0" data-datatableeleloffsetwidth500at1001="0" data-datatableel500eloffsetwidthat1001="0" data-datatableeleloffsetwidth500at1101="0" data-datatableel500eloffsetwidthat1101="0" data-datatableeleloffsetwidth500at1201="0" data-datatableel500eloffsetwidthat1201="0" data-datatableeleloffsetwidth500at1301="0" data-datatableel500eloffsetwidthat1301="0" data-datatableeleloffsetwidth500at1401="0" data-datatableel500eloffsetwidthat1401="0" data-datatableeleloffsetwidth500at1501="0" data-datatableel500eloffsetwidthat1501="0" data-datatableeleloffsetwidth500at1601="0" data-datatableel500eloffsetwidthat1601="0" data-datatableeleloffsetwidth500at1701="0" data-datatableel500eloffsetwidthat1701="0" data-datatableeleloffsetwidth500at1801="0" data-datatableel500eloffsetwidthat1801="0" data-datatableeleloffsetwidth500at1901="0" data-datatableel500eloffsetwidthat1901="0" data-datatableeleloffsetwidth500at2000="0" data-datatableel500eloffsetwidthat2000="0">
<caption><table data-table=col-six></caption>
<thead>
<tr>
<th>Name</th>
<th>X Axis</th>
<th>Y Axis</th>
<th>Z Axis</th>
<th>Speed</th>
<th>Time</th>
<th>Finish</th>
</tr>
</thead>
<tbody>
<tr>
<td data-heading="Name">Test Flight 1</td>
<td data-heading="X Axis">120°</td>
<td data-heading="Y Axis">40°</td>
<td data-heading="Z Axis">157°</td>
<td data-heading="Speed">1503㎧</td>
<td data-heading="Time">1:05</td>
<td data-heading="Finish">459</td>
</tr>
<tr>
<td data-heading="Name">Test Flight 2</td>
<td data-heading="X Axis">80°</td>
<td data-heading="Y Axis">94°</td>
<td data-heading="Z Axis">30°</td>
<td data-heading="Speed">200㎧</td>
<td data-heading="Time">0:45</td>
<td data-heading="Finish">487</td>
</tr>
<tr>
<td data-heading="Name">Test Flight 3</td>
<td data-heading="X Axis">77°</td>
<td data-heading="Y Axis">78°</td>
<td data-heading="Z Axis">90°</td>
<td data-heading="Speed">55㎧</td>
<td data-heading="Time">1:20</td>
<td data-heading="Finish">458</td>
</tr>
</tbody>
</table>
<!-- Five Col -->
<table data-table="col-five" data-datatablecoleleloffsetwidth500at1="1" data-datatablecoleleloffsetwidth500at101="1" data-datatablecoleleloffsetwidth500at201="1" data-datatablecoleleloffsetwidth500at301="1" data-datatablecoleleloffsetwidth500at401="1" data-datatablecoleleloffsetwidth500at501="1" data-datatableeleloffsetwidth500at601="1" data-datatableel500eloffsetwidthat601="1" data-datatableeleloffsetwidth500at701="1" data-datatableel500eloffsetwidthat701="1" data-datatableeleloffsetwidth500at801="1" data-datatableel500eloffsetwidthat801="1" data-datatableeleloffsetwidth500at901="1" data-datatableel500eloffsetwidthat901="1" data-datatableeleloffsetwidth500at1001="1" data-datatableel500eloffsetwidthat1001="1" data-datatableeleloffsetwidth500at1101="1" data-datatableel500eloffsetwidthat1101="1" data-datatableeleloffsetwidth500at1201="1" data-datatableel500eloffsetwidthat1201="1" data-datatableeleloffsetwidth500at1301="1" data-datatableel500eloffsetwidthat1301="1" data-datatableeleloffsetwidth500at1401="1" data-datatableel500eloffsetwidthat1401="1" data-datatableeleloffsetwidth500at1501="1" data-datatableel500eloffsetwidthat1501="1" data-datatableeleloffsetwidth500at1601="1" data-datatableel500eloffsetwidthat1601="1" data-datatableeleloffsetwidth500at1701="1" data-datatableel500eloffsetwidthat1701="1" data-datatableeleloffsetwidth500at1801="1" data-datatableel500eloffsetwidthat1801="1" data-datatableeleloffsetwidth500at1901="1" data-datatableel500eloffsetwidthat1901="1" data-datatableeleloffsetwidth500at2000="1" data-datatableel500eloffsetwidthat2000="1">
<caption><table data-table=col-five></caption>
<thead>
<tr>
<th>Name</th>
<th>X Axis</th>
<th>Y Axis</th>
<th>Z Axis</th>
<th>Speed</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr>
<td data-heading="Name">Test Flight 1</td>
<td data-heading="X Axis">120°</td>
<td data-heading="Y Axis">40°</td>
<td data-heading="Z Axis">157°</td>
<td data-heading="Speed">1503㎧</td>
<td data-heading="Time">1:05</td>
</tr>
<tr>
<td data-heading="Name">Test Flight 2</td>
<td data-heading="X Axis">80°</td>
<td data-heading="Y Axis">94°</td>
<td data-heading="Z Axis">30°</td>
<td data-heading="Speed">200㎧</td>
<td data-heading="Time">0:45</td>
</tr>
<tr>
<td data-heading="Name">Test Flight 3</td>
<td data-heading="X Axis">77°</td>
<td data-heading="Y Axis">78°</td>
<td data-heading="Z Axis">90°</td>
<td data-heading="Speed">55㎧</td>
<td data-heading="Time">1:20</td>
</tr>
</tbody>
</table>
<!-- Four Col -->
<table data-table="col-four" data-datatablecoleleloffsetwidth500at1="2" data-datatablecoleleloffsetwidth500at101="2" data-datatablecoleleloffsetwidth500at201="2" data-datatablecoleleloffsetwidth500at301="2" data-datatablecoleleloffsetwidth500at401="2" data-datatablecoleleloffsetwidth500at501="2" data-datatableeleloffsetwidth500at601="2" data-datatableel500eloffsetwidthat601="2" data-datatableeleloffsetwidth500at701="2" data-datatableel500eloffsetwidthat701="2" data-datatableeleloffsetwidth500at801="2" data-datatableel500eloffsetwidthat801="2" data-datatableeleloffsetwidth500at901="2" data-datatableel500eloffsetwidthat901="2" data-datatableeleloffsetwidth500at1001="2" data-datatableel500eloffsetwidthat1001="2" data-datatableeleloffsetwidth500at1101="2" data-datatableel500eloffsetwidthat1101="2" data-datatableeleloffsetwidth500at1201="2" data-datatableel500eloffsetwidthat1201="2" data-datatableeleloffsetwidth500at1301="2" data-datatableel500eloffsetwidthat1301="2" data-datatableeleloffsetwidth500at1401="2" data-datatableel500eloffsetwidthat1401="2" data-datatableeleloffsetwidth500at1501="2" data-datatableel500eloffsetwidthat1501="2" data-datatableeleloffsetwidth500at1601="2" data-datatableel500eloffsetwidthat1601="2" data-datatableeleloffsetwidth500at1701="2" data-datatableel500eloffsetwidthat1701="2" data-datatableeleloffsetwidth500at1801="2" data-datatableel500eloffsetwidthat1801="2" data-datatableeleloffsetwidth500at1901="2" data-datatableel500eloffsetwidthat1901="2" data-datatableeleloffsetwidth500at2000="2" data-datatableel500eloffsetwidthat2000="2">
<caption><table data-table=col-four></caption>
<thead>
<tr>
<th>Name</th>
<th>X Axis</th>
<th>Y Axis</th>
<th>Z Axis</th>
<th>Speed</th>
</tr>
</thead>
<tbody>
<tr>
<td data-heading="Name">Test Flight 1</td>
<td data-heading="X Axis">120°</td>
<td data-heading="Y Axis">40°</td>
<td data-heading="Z Axis">157°</td>
<td data-heading="Speed">1503㎧</td>
</tr>
<tr>
<td data-heading="Name">Test Flight 1</td>
<td data-heading="X Axis">120°</td>
<td data-heading="Y Axis">40°</td>
<td data-heading="Z Axis">157°</td>
<td data-heading="Speed">1503㎧</td>
</tr>
<tr>
<td data-heading="Name">Test Flight 2</td>
<td data-heading="X Axis">80°</td>
<td data-heading="Y Axis">94°</td>
<td data-heading="Z Axis">30°</td>
<td data-heading="Speed">200㎧</td>
</tr>
</tbody>
</table>
<!-- Three Col -->
<table data-table="col-three" data-datatablecoleleloffsetwidth500at1="3" data-datatablecoleleloffsetwidth500at101="3" data-datatablecoleleloffsetwidth500at201="3" data-datatablecoleleloffsetwidth500at301="3" data-datatablecoleleloffsetwidth500at401="3" data-datatablecoleleloffsetwidth500at501="3" data-datatableeleloffsetwidth500at601="3" data-datatableel500eloffsetwidthat601="3" data-datatableeleloffsetwidth500at701="3" data-datatableel500eloffsetwidthat701="3" data-datatableeleloffsetwidth500at801="3" data-datatableel500eloffsetwidthat801="3" data-datatableeleloffsetwidth500at901="3" data-datatableel500eloffsetwidthat901="3" data-datatableeleloffsetwidth500at1001="3" data-datatableel500eloffsetwidthat1001="3" data-datatableeleloffsetwidth500at1101="3" data-datatableel500eloffsetwidthat1101="3" data-datatableeleloffsetwidth500at1201="3" data-datatableel500eloffsetwidthat1201="3" data-datatableeleloffsetwidth500at1301="3" data-datatableel500eloffsetwidthat1301="3" data-datatableeleloffsetwidth500at1401="3" data-datatableel500eloffsetwidthat1401="3" data-datatableeleloffsetwidth500at1501="3" data-datatableel500eloffsetwidthat1501="3" data-datatableeleloffsetwidth500at1601="3" data-datatableel500eloffsetwidthat1601="3" data-datatableeleloffsetwidth500at1701="3" data-datatableel500eloffsetwidthat1701="3" data-datatableeleloffsetwidth500at1801="3" data-datatableel500eloffsetwidthat1801="3" data-datatableeleloffsetwidth500at1901="3" data-datatableel500eloffsetwidthat1901="3" data-datatableeleloffsetwidth500at2000="3" data-datatableel500eloffsetwidthat2000="3">
<caption><table data-table=col-three></caption>
<thead>
<tr>
<th>Name</th>
<th>X Axis</th>
<th>Y Axis</th>
<th>Z Axis</th>
<th>Speed</th>
<th>Time</th>
<th>Finish</th>
</tr>
</thead>
<tbody>
<tr>
<td data-heading="Name">Test Flight 1</td>
<td data-heading="X Axis">120°</td>
<td data-heading="Y Axis">40°</td>
<td data-heading="Z Axis">157°</td>
<td data-heading="Speed">1503㎧</td>
<td data-heading="Time">1:05</td>
<td data-heading="Finish">459</td>
</tr>
<tr>
<td data-heading="Name">Test Flight 2</td>
<td data-heading="X Axis">80°</td>
<td data-heading="Y Axis">94°</td>
<td data-heading="Z Axis">30°</td>
<td data-heading="Speed">200㎧</td>
<td data-heading="Time">0:45</td>
<td data-heading="Finish">487</td>
</tr>
<tr>
<td data-heading="Name">Test Flight 3</td>
<td data-heading="X Axis">77°</td>
<td data-heading="Y Axis">78°</td>
<td data-heading="Z Axis">90°</td>
<td data-heading="Speed">55㎧</td>
<td data-heading="Time">1:20</td>
<td data-heading="Finish">458</td>
</tr>
</tbody>
</table>
<!-- Two Col -->
<table data-table="col-two" data-datatablecoleleloffsetwidth500at1="4" data-datatablecoleleloffsetwidth500at101="4" data-datatablecoleleloffsetwidth500at201="4" data-datatablecoleleloffsetwidth500at301="4" data-datatablecoleleloffsetwidth500at401="4" data-datatablecoleleloffsetwidth500at501="4" data-datatableeleloffsetwidth500at601="4" data-datatableel500eloffsetwidthat601="4" data-datatableeleloffsetwidth500at701="4" data-datatableel500eloffsetwidthat701="4" data-datatableeleloffsetwidth500at801="4" data-datatableel500eloffsetwidthat801="4" data-datatableeleloffsetwidth500at901="4" data-datatableel500eloffsetwidthat901="4" data-datatableeleloffsetwidth500at1001="4" data-datatableel500eloffsetwidthat1001="4" data-datatableeleloffsetwidth500at1101="4" data-datatableel500eloffsetwidthat1101="4" data-datatableeleloffsetwidth500at1201="4" data-datatableel500eloffsetwidthat1201="4" data-datatableeleloffsetwidth500at1301="4" data-datatableel500eloffsetwidthat1301="4" data-datatableeleloffsetwidth500at1401="4" data-datatableel500eloffsetwidthat1401="4" data-datatableeleloffsetwidth500at1501="4" data-datatableel500eloffsetwidthat1501="4" data-datatableeleloffsetwidth500at1601="4" data-datatableel500eloffsetwidthat1601="4" data-datatableeleloffsetwidth500at1701="4" data-datatableel500eloffsetwidthat1701="4" data-datatableeleloffsetwidth500at1801="4" data-datatableel500eloffsetwidthat1801="4" data-datatableeleloffsetwidth500at1901="4" data-datatableel500eloffsetwidthat1901="4" data-datatableeleloffsetwidth500at2000="4" data-datatableel500eloffsetwidthat2000="4">
<caption><table data-table=col-two></caption>
<thead>
<tr>
<th>Name</th>
<th>X Axis</th>
<th>Y Axis</th>
<th>Z Axis</th>
<th>Speed</th>
<th>Time</th>
<th>Finish</th>
</tr>
</thead>
<tbody>
<tr>
<td data-heading="Name">Test Flight 1</td>
<td data-heading="X Axis">120°</td>
<td data-heading="Y Axis">40°</td>
<td data-heading="Z Axis">157°</td>
<td data-heading="Speed">1503㎧</td>
<td data-heading="Time">1:05</td>
<td data-heading="Finish">459</td>
</tr>
<tr>
<td data-heading="Name">Test Flight 2</td>
<td data-heading="X Axis">80°</td>
<td data-heading="Y Axis">94°</td>
<td data-heading="Z Axis">30°</td>
<td data-heading="Speed">200㎧</td>
<td data-heading="Time">0:45</td>
<td data-heading="Finish">18</td>
</tr>
<tr>
<td data-heading="Name">Test Flight 3</td>
<td data-heading="X Axis">77°</td>
<td data-heading="Y Axis">78°</td>
<td data-heading="Z Axis">90°</td>
<td data-heading="Speed">55㎧</td>
<td data-heading="Time">1:20</td>
<td data-heading="Finish">458</td>
</tr>
</tbody>
</table>
<!-- One Col -->
<table data-table="col-one" data-datatablecoleleloffsetwidth500at1="5" data-datatablecoleleloffsetwidth500at101="5" data-datatablecoleleloffsetwidth500at201="5" data-datatablecoleleloffsetwidth500at301="5" data-datatablecoleleloffsetwidth500at401="5" data-datatablecoleleloffsetwidth500at501="5" data-datatableeleloffsetwidth500at601="5" data-datatableel500eloffsetwidthat601="5" data-datatableeleloffsetwidth500at701="5" data-datatableel500eloffsetwidthat701="5" data-datatableeleloffsetwidth500at801="5" data-datatableel500eloffsetwidthat801="5" data-datatableeleloffsetwidth500at901="5" data-datatableel500eloffsetwidthat901="5" data-datatableeleloffsetwidth500at1001="5" data-datatableel500eloffsetwidthat1001="5" data-datatableeleloffsetwidth500at1101="5" data-datatableel500eloffsetwidthat1101="5" data-datatableeleloffsetwidth500at1201="5" data-datatableel500eloffsetwidthat1201="5" data-datatableeleloffsetwidth500at1301="5" data-datatableel500eloffsetwidthat1301="5" data-datatableeleloffsetwidth500at1401="5" data-datatableel500eloffsetwidthat1401="5" data-datatableeleloffsetwidth500at1501="5" data-datatableel500eloffsetwidthat1501="5" data-datatableeleloffsetwidth500at1601="5" data-datatableel500eloffsetwidthat1601="5" data-datatableeleloffsetwidth500at1701="5" data-datatableel500eloffsetwidthat1701="5" data-datatableeleloffsetwidth500at1801="5" data-datatableel500eloffsetwidthat1801="5" data-datatableeleloffsetwidth500at1901="5" data-datatableel500eloffsetwidthat1901="5" data-datatableeleloffsetwidth500at2000="5" data-datatableel500eloffsetwidthat2000="5">
<caption><table data-table=col-one></caption>
<thead>
<tr>
<th>Name</th>
<th>X Axis</th>
<th>Y Axis</th>
<th>Z Axis</th>
<th>Speed</th>
<th>Time</th>
<th>Finish</th>
</tr>
</thead>
<tbody>
<tr>
<td data-heading="Name">Test Flight 1</td>
<td data-heading="X Axis">120°</td>
<td data-heading="Y Axis">40°</td>
<td data-heading="Z Axis">157°</td>
<td data-heading="Speed">1503㎧</td>
<td data-heading="Time">1:05</td>
<td data-heading="Finish">40</td>
</tr>
<tr>
<td data-heading="Name">Test Flight 2</td>
<td data-heading="X Axis">80°</td>
<td data-heading="Y Axis">94°</td>
<td data-heading="Z Axis">30°</td>
<td data-heading="Speed">200㎧</td>
<td data-heading="Time">0:45</td>
<td data-heading="Finish">487</td>
</tr>
<tr>
<td data-heading="Name">Test Flight 3</td>
<td data-heading="X Axis">77°</td>
<td data-heading="Y Axis">78°</td>
<td data-heading="Z Axis">90°</td>
<td data-heading="Speed">55㎧</td>
<td data-heading="Time">1:20</td>
<td data-heading="Finish">458</td>
</tr>
</tbody>
</table></body></html>