Sources sur github.com – responsive-tables.
Source de départ: Responsive Tables – Flip Scroll. his technique was first published by David Bushell (@dbushell). For the full low down on this technique visit his post on the technique, Responsive Tables (2). While you’re there, it’s also worth checking out his responsive calendar proof of concept.
Demo jsFiddle.net; Même chose (optimisé par Anthony)
Attention: le système de mediaqueries SASS/JS dans le code qui va suivre est issu de Foundation 6.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<div class="table-flip-scroll"> <table> <thead> <tr> <th scope="col">Brand</th> <th scope="col">Reference</th> <th scope="col">Ranges</th> </tr> </thead> <tbody> <tr> <td>NTN</td> <td>6205</td> <td>Single row tapered roller bearings</td> </tr> <tr> <td>SNR</td> <td>6205, 6205, 6205, 6205, 6205</td> <td>Single row tapered roller bearings</td> </tr> <tr> <td>SNR</td> <td>6205</td> <td> <ul> <li>Single row tapered roller bearings</li> <li>Single row deep groove ball bearings</li> <li>Single row tapered roller bearings</li> <li>Single row deep groove ball bearings</li> <li>Single row tapered roller bearings</li> </ul> </td> </tr> <tr> <td>SNR</td> <td>6205.E</td> <td> <ul> <li>Single row tapered roller bearings</li> <li>Single row deep groove ball bearings</li> </ul> </tr> </tbody> </table> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/* * jQuery Table Flip Scroll plug-in */ $.tableFlipScroll = function(selector){ var obj = $(selector); function matchCellsHeights(columnIndex){ columnIndex++ var columnCellsHeights = $.map(obj.find('th:nth-child('+columnIndex+'), td:nth-child('+columnIndex+')'), function(val){ return $(val).outerHeight(); }); var columnHighestCell = Math.max.apply(null, columnCellsHeights); obj.find('th:nth-child('+columnIndex+'), td:nth-child('+columnIndex+')').css('height', columnHighestCell +'px'); } var $th = obj.find('th'); $th.each(function(index){ matchCellsHeights(index); }); } /* * Responsive Product List Table */ if($('.table-flip-scroll').length == 1){ if(getCurrentMediaQuery === 'small' || getCurrentMediaQuery === 'medium'){ $('body').css('border', '12px solid navy'); $.tableFlipScroll('.table-flip-scroll'); } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
@mixin table-flip-scroll-core() { table { display: block; position: relative; width: 100%; border-collapse: collapse; border-spacing: 0; thead { display: block; float: left; tr { display: block; } } tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; tr { display: inline-block; vertical-align: top; } } th, td { margin: 0; vertical-align: top; display: block; text-align: left; } } } @mixin table-flip-scroll-skin( $thead-width: 33.33333%, $border-width: 1px, $border-color: #ccc) { table { thead { width: $thead-width; } th { border-bottom: 0; border-left: 0; } td { border-left: 0; border-right: 0; border-bottom: 0; } tbody { tr { border-left: $border-width solid $border-color; } } th:last-child, td:last-child { border-bottom: $border-width solid $border-color; } } } @include breakpoint(medium down) { .table-flip-scroll { @include table-flip-scroll-core(); @include table-flip-scroll-skin(); .thead-second-row, .sort { display: none; } } } |