Skip to content

Instantly share code, notes, and snippets.

@everton

everton/table-to-mobile.html

Created December 23, 2018 15:20
Show Gist options
  • Save everton/b2b8c020f8a31998238c761728c60f15 to your computer and use it in GitHub Desktop.
Save everton/b2b8c020f8a31998238c761728c60f15 to your computer and use it in GitHub Desktop.
Download ZIP
Mobile Table + CSS Scroll Snap Points
Raw
table-to-mobile.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mobile Table + CSS Scroll Snap Points</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css" media="screen">
table, th, td {
border: none;
border-collapse: collapse;
}
tbody tr:nth-child(odd) {
background-color: #ccc;
}
@media all and (max-width: 768px) {
body {
background-color: lightblue;
}
table, tbody, thead, tr, th, td, caption {
display: block;
padding: 0;
margin: 0;
}
table {
position: fixed;
overflow-x: auto;
}
thead {
position: absolute;
left: 0;
width: 16%;
font-size: 10px;
text-align: left;
}
thead tr:nth-child(odd), tbody tr:nth-child(odd) {
background-color: transparent;
}
tbody {
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(100%);
scroll-behaviour: smooth;
scroll-snap-type: y mandatory;
overflow-y: scroll;
margin-left: 17%;
color: green;
/* $mobile-line-height * $columns-count */
height: 168px;
}
tr th, tr td {
/* $mobile-line-height */
line-height: 24px;
height: 24px;
}
tbody tr {
scroll-snap-align: start;
}
tr th:nth-child(odd), tr td:nth-child(odd) {
background-color: #ccc;
}
tbody tr td {
width: 98%;
overflow: hidden;
}
table:after {
content: '(...)';
margin: 10px auto;
text-align: center;
position: relative;
display: block;
clear: both;
}
tbody tr td.product_intakes:active {
position: absolute;
z-index: 1;
top: 0px;
left: 0px;
width: 92%;
background: antiquewhite;
height: 160px;
padding: 10px;
overflow: visible;
}
tbody tr td.product_intakes:before {
float: right;
width: 24px;
margin-right: 10px;
content: ' (...)';
}
tbody tr td.product_intakes:active:before {
content: '';
}
}
</style>
</head>
<body>
<h1>Mobile Table + CSS Scroll Snap Points</h1>
<form class="items" action="/canteen_operator/intakes_refunds" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓">
<table id="consumptions">
<caption>Comandas</caption>
<thead>
<tr>
<th><input type="checkbox" /></th>
<th>Aluno</th>
<th>Série</th>
<th>Produtos</th>
<th>Origem</th>
<th>Hora</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td><a href="/canteen_operator/students/201021">Guilherme Example</a></td>
<td class="grade">7ª</td>
<td class="product_intakes">1x Compra por valor R$ 5,00</td>
<td>AC_TAA_2015</td>
<td>19/12/18 15:52</td>
<td class="total">R$ 5,00</td>
</tr>
<tr class="">
<td></td>
<td><a href="/canteen_operator/students/201021">Guilherme Example</a></td>
<td class="grade">7ª</td>
<td class="product_intakes">1x Do bem limonada 200ml (do bem) R$ 2,00 / 2x Batata ruffles churrasco 50g (ruffles) R$ 2,00</td>
<td>AC_TAA_2015</td>
<td>19/12/18 15:39</td>
<td class="total">R$ 6,00</td>
</tr>
<tr class="">
<td><input type="checkbox" /></td>
<td><a href="/canteen_operator/students/201021">Guilherme Example</a></td>
<td class="grade">7ª</td>
<td class="product_intakes">1x Compra por valor R$ 4,00</td>
<td>Antonio Carlos OP</td>
<td>19/12/18 00:00</td>
<td class="total">R$ 4,00</td>
</tr>
<tr class="">
<td></td>
<td><a href="/canteen_operator/students/5418">Marina Melo Pires D´ÁguaÖ</a></td>
<td class="grade">8ª</td>
<td class="product_intakes">1x Actimel tradicional 100g (danone) R$ 2,50</td>
<td>AC_TAA_2015</td>
<td>18/12/18 16:22</td>
<td class="total">R$ 2,50</td>
</tr>
<tr class="">
<td><input type="checkbox" /></td>
<td><a href="/canteen_operator/students/5418">Marina Melo Pires D´ÁguaÖ</a></td>
<td class="grade">8ª</td>
<td class="product_intakes">1x Actimel tradicional 100g (danone) R$ 2,50</td>
<td>AC_TAA_2015</td>
<td>18/12/18 16:19</td>
<td class="total">R$ 2,50</td>
</tr>
<tr class="refunded">
<td></td>
<td><a href="/canteen_operator/students/5418">Marina Melo Pires D´ÁguaÖ</a></td>
<td class="grade">8ª</td>
<td class="product_intakes">1x Amendoim crokíssimo salsa/ceb 30g (santa helena) R$ 1,50 / 2x Batata ruffles churrasco 50g (ruffles) R$ 2,00 / 1x Croissant calabresa 160g (delicia lanches) R$ 3,50</td>
<td>TEST_LAB22_01</td>
<td>18/12/18 15:00</td>
<td class="total">R$ 9,00</td>
</tr>
<tr class="">
<td>
<input type="checkbox" />
</td>
<td><a href="/canteen_operator/students/192538">Ana Paulinha</a></td>
<td class="grade">4ª</td>
<td class="product_intakes">1x Picolé fruttare cajá 58g (kibon) R$ 4,00</td>
<td>TEST_LAB22_01</td>
<td>18/12/18 14:09</td>
<td class="total">R$ 4,00</td>
</tr>
<tr class="">
<td>
</td>
<td><a href="/canteen_operator/students/192538">Ana Paulinha</a></td>
<td class="grade">4ª</td>
<td class="product_intakes">1x Kapo abacaxi 200ml (del valle) R$ 1,23</td>
<td>TEST_LAB22_01</td>
<td>18/12/18 14:08</td>
<td class="total">R$ 1,23</td>
</tr>
<tr class="">
<td>
</td>
<td><a href="/canteen_operator/students/192538">Ana Paulinha</a></td>
<td class="grade">4ª</td>
<td class="product_intakes">1x Água sem gás 500ml (minalice) R$ 2,00 / 1x Kapo abacaxi 200ml (del valle) R$ 1,23</td>
<td>TEST_LAB22_01</td>
<td>18/12/18 14:05</td>
<td class="total">R$ 3,23</td>
</tr>
<tr class="">
<td>
</td>
<td><a href="/canteen_operator/students/5524">Luquinhas Facchini</a></td>
<td class="grade">2ª</td>
<td class="product_intakes">1x Suco abacaxi + cenoura + limão + gengibre 200ml (suco raízes) R$ 2,00 / 1x Esfiha de carne 135g (casa do pão de queijo &amp; cia) R$ 3,50</td>
<td>TEST_LAB22_01</td>
<td>17/12/18 16:22</td>
<td class="total">R$ 5,50</td>
</tr>
<tr class="">
<td>
</td>
<td><a href="/canteen_operator/students/72124">André Example</a></td>
<td class="grade">EF II: 9</td>
<td class="product_intakes">1x Feel good chá verde 450ml (feel good) R$ 4,50 / 1x Sonho de valsa 22g (lacta) R$ 1,25 / 1x Bombom ouro branco 22g (lacta) R$ 1,25</td>
<td>RENA_AA_11</td>
<td>14/12/18 11:53</td>
<td class="total">R$ 7,00</td>
</tr><tr class="">
<td>
</td>
<td><a href="/canteen_operator/students/72091">Lidia Example</a></td>
<td class="grade">EF II: 8</td>
<td class="product_intakes">1x Sonho de valsa 22g (lacta) R$ 1,25 / 1x Bombom ouro branco 22g (lacta) R$ 1,25</td>
<td>RENA_AA_11</td>
<td>14/12/18 11:52</td>
<td class="total">R$ 2,50</td>
</tr><tr class="">
<td>
</td>
<td><a href="/canteen_operator/students/39791">Pedro Example da Silva</a></td>
<td class="grade">FUND 1 DESC</td>
<td class="product_intakes">1x Compra por valor R$ 51,51</td>
<td>JP_AA_6</td>
<td>14/12/18 08:20</td>
<td class="total">R$ 51,51</td>
</tr><tr class="">
<td>
<input type="checkbox" />
</td>
<td><a href="/canteen_operator/students/39602">Luis Felipe Example Tamborim</a></td>
<td class="grade">EF I: 3</td>
<td class="product_intakes">1x Picolé lafrutta morango 56g (nestlé) R$ 5,00</td>
<td>JP_AA_6</td>
<td>13/12/18 18:20</td>
<td class="total">R$ 5,00</td>
</tr><tr class="">
<td>
</td>
<td><a href="/canteen_operator/students/39602">Luis Felipe Example Tamborim</a></td>
<td class="grade">EF I: 3</td>
<td class="product_intakes">1x Esfiha de carne 124g (paulo salgados) R$ 5,00</td>
<td>JP_AA_6</td>
<td>13/12/18 18:19</td>
<td class="total">R$ 5,00</td>
</tr><tr class="">
<td>
</td>
<td><a href="/canteen_operator/students/192538">Ana Paulinha</a></td>
<td class="grade">4ª</td>
<td class="product_intakes">1x Picolé fruttare cajá 58g (kibon) R$ 4,00 / 1x Kapo abacaxi 200ml (del valle) R$ 1,23</td>
<td>TEST_LAB22_01</td>
<td>13/12/18 11:59</td>
<td class="total">R$ 5,23</td>
</tr><tr class="">
<td>
</td>
<td><a href="/canteen_operator/students/192538">Ana Paulinha</a></td>
<td class="grade">4ª</td>
<td class="product_intakes">1x Combo lanche 2ªfeira (cantina nutrebem) R$ 10,00 / 1x Almoço nutrebem 5g 5g (cantina nutrebem) R$ 0,16</td>
<td>TEST_LAB22_01</td>
<td>13/12/18 11:58</td>
<td class="total">R$ 10,16</td>
</tr><tr class="">
<td>
<input type="checkbox" />
</td>
<td><a href="/canteen_operator/students/72232">Juliana Example Capiroto</a></td>
<td class="grade">EM: 2</td>
<td class="product_intakes">2x Paçoquita retangular 20g (santa helena) R$ 1,00 / 1x Feel good chá verde 450ml (feel good) R$ 4,50</td>
<td>RENA_AA_10</td>
<td>13/12/18 09:22</td>
<td class="total">R$ 6,50</td>
</tr><tr class="">
<td>
</td>
<td><a href="/canteen_operator/students/72091">Lidia Example</a></td>
<td class="grade">EF II: 8</td>
<td class="product_intakes">1x Feel good chá verde 450ml (feel good) R$ 4,50 / 2x Bombom ouro branco 22g (lacta) R$ 1,25</td>
<td>RENA_AA_10</td>
<td>13/12/18 09:21</td>
<td class="total">R$ 7,00</td>
</tr><tr class="">
<td>
</td>
<td><a href="/canteen_operator/students/72124">André Example</a></td>
<td class="grade">EF II: 9</td>
<td class="product_intakes">1x Feel good chá verde 450ml (feel good) R$ 4,50 / 1x Sonho de valsa 22g (lacta) R$ 1,25 / 1x Bombom ouro branco 22g (lacta) R$ 1,25</td>
<td>RENA_AA_10</td>
<td>13/12/18 09:21</td>
<td class="total">R$ 7,00</td>
</tr></tbody>
</table>
</form>
<script src="https://rawgit.com/ckrack/scrollsnap-polyfill/develop/dist/scrollsnap-polyfill.bundled.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment