Last active
October 16, 2020 16:19
-
-
Save adriano66/26f2679dfa4ab3a1d3482a21e92a1e55 to your computer and use it in GitHub Desktop.
Flip table
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Title</title> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> | |
| <script src="flip-table.js"></script> | |
| <link href="flip_table.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="flip-table"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>11111 Lorem ipsum.</th> | |
| <th>Quam, vel.</th> | |
| <th>Ipsa, culpa.</th> | |
| <th>Odio, dolorum!</th> | |
| <th>Ex, provident.</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>11111 Lorem ipsum dolor sit amet.</td> | |
| <td>Nobis eum aliquam libero repellat.</td> | |
| <td>At, harum, ipsam. Ipsam, vero.</td> | |
| <td>Dolorem quisquam, sapiente repellendus expedita!</td> | |
| <td>Nemo odio, aliquid sequi quidem.</td> | |
| </tr> | |
| <tr> | |
| <td>11111 Lorem ipsum dolor sit amet.</td> | |
| <td>Accusantium maxime inventore, omnis fuga.</td> | |
| <td>Aut, repudiandae earum omnis praesentium.</td> | |
| <td>Obcaecati alias dolor sint recusandae?</td> | |
| <td>Optio enim totam, itaque doloribus.</td> | |
| </tr> | |
| <tr> | |
| <td>11111 Lorem ipsum dolor sit amet.</td> | |
| <td>Cupiditate, aspernatur ut ipsam temporibus.</td> | |
| <td>Nobis sunt ut rem, perferendis!</td> | |
| <td>Ad officiis repudiandae accusantium error.</td> | |
| <td>Quam mollitia voluptatem provident numquam.</td> | |
| </tr> | |
| <tr> | |
| <td>11111 Lorem ipsum dolor sit amet.</td> | |
| <td>Est et unde assumenda animi.</td> | |
| <td>Beatae quo quaerat alias totam.</td> | |
| <td>Consequuntur vero, quisquam illo magnam!</td> | |
| <td>Consequuntur sequi ad dolore nostrum?</td> | |
| </tr> | |
| <tr> | |
| <td>11111 Lorem ipsum dolor sit amet.</td> | |
| <td>Accusantium quasi saepe commodi. Minus.</td> | |
| <td>Ullam placeat, libero eum nam.</td> | |
| <td>Aspernatur esse quo optio natus?</td> | |
| <td>Dolores, tempora, assumenda. Perferendis, perspiciatis?</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <ul id="nav"></ul> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var itemWitdth = $('td').outerWidth(); | |
| $('tbody tr').each(function (i) { | |
| var active = (0 === i) ? ' class="active"' : ''; | |
| $('#nav').append('<li' + active + '><a href="#" class="js-table">' + i + '</a></li>'); | |
| }); | |
| $('.flip-table').on('click', '.js-table', function () { | |
| $('#nav li').removeClass('active'); | |
| $(this).parent('li').addClass('active'); | |
| var itemNumber = $(this).text(); | |
| var left = (100 - itemWitdth * itemNumber) + "px"; | |
| $('tbody').animate({ | |
| left: left | |
| }, 300); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $row-width: 200px; | |
| $header-width: 100px; | |
| $row-height: 100px; | |
| #nav { | |
| display: none; | |
| } | |
| @media all and (max-width: 480px) { | |
| .flip-table { | |
| height: auto; | |
| overflow: hidden; | |
| width: $header-width + $row-width; | |
| } | |
| tr { | |
| display: table-cell; | |
| } | |
| td, | |
| th { | |
| display: block; | |
| border: none; | |
| height: $row-height; | |
| box-sizing: border-box; | |
| } | |
| thead { | |
| background: gold; | |
| display: block; | |
| position: absolute; | |
| left: 0; | |
| z-index: 2; | |
| th { | |
| width: $header-width; | |
| } | |
| } | |
| tbody { | |
| background: red; | |
| font-weight: bold; | |
| display: inline-block; | |
| left: $header-width; | |
| position: relative; | |
| td { | |
| width: $row-width; | |
| padding: 0 1ex; | |
| } | |
| } | |
| #nav { | |
| display: block; | |
| margin: 0; | |
| padding: 0; | |
| li { | |
| display: inline-block; | |
| margin: 0; | |
| padding: 0 1em; | |
| border: 1px solid #f00; | |
| border-radius: 50%; | |
| width: 20px; | |
| height: 20px; | |
| font-size: 0; | |
| overflow: hidden; | |
| &.active { | |
| background: red; | |
| } | |
| a { | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment