Ressources en ligne :
Deux exemples maison pour un tableau comparatif :
Tableau comparatif dont les éléments à comparer deviennent horizontalement scrollables en vue mobile
Simulation JSfiddle.net (avec code source propre), demo.

Tableau comparatif dont les éléments à comparer se désolidarisent pour s’empiler en vue mobile
Nouveau: une version plus flexible basée sur Flexbox (sources core). https://jsfiddle.net/frontenddeveloper/ay5v30p5/
…et la gueule de cette version Flexbox sous IE11:

Simulation JSfiddle.net (avec code source propre). Attention : la partie commentée du code CSS ne semble pas adaptée à notre exemple.

En utilisant display: inline-block; sur les rangées et white-space: nowrap; sur le corps du tableau :
Source et simulation (Flip Scroll) : http://elvery.net/demo/responsive-tables/#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
|
<table> <thead> <tr> <th>Code</th> <th>Company</th> <th class="numeric">Price</th> <th class="numeric">Change</th> <th class="numeric">Change %</th> <th class="numeric">Open</th> <th class="numeric">High</th> <th class="numeric">Low</th> <th class="numeric">Volume</th> </tr> </thead> <tbody> <tr> <td>AAC</td> <td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td> <td class="numeric">$1.38</td> <td class="numeric">-0.01</td> <td class="numeric">-0.36%</td> <td class="numeric">$1.39</td> <td class="numeric">$1.39</td> <td class="numeric">$1.38</td> <td class="numeric">9,395</td> </tr> </tbody> </table> |
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
|
@media only screen and (max-width: 800px) { #flip-scroll .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } #flip-scroll * html .cf { zoom: 1; } #flip-scroll *:first-child+html .cf { zoom: 1; } #flip-scroll table { width: 100%; border-collapse: collapse; border-spacing: 0; } #flip-scroll th, #flip-scroll td { margin: 0; vertical-align: top; } #flip-scroll th { text-align: left; } #flip-scroll table { display: block; position: relative; width: 100%; } #flip-scroll thead { display: block; float: left; } #flip-scroll tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; } #flip-scroll thead tr { display: block; } #flip-scroll th { display: block; text-align: right; } #flip-scroll tbody tr { display: inline-block; vertical-align: top; } #flip-scroll td { display: block; min-height: 1.25em; text-align: left; } /* sort out borders */ #flip-scroll th { border-bottom: 0; border-left: 0; } #flip-scroll td { border-left: 0; border-right: 0; border-bottom: 0; } #flip-scroll tbody tr { border-left: 1px solid #babcbf; } #flip-scroll th:last-child, #flip-scroll td:last-child { border-bottom: 1px solid #babcbf; } } |
Récupérer les hauteurs (en px) de chaque cellule d’en-tête, les stocker dans un tableau et les réattribuer aux cellules correspondantes dans le corps du tableau.
|
var listHeight = $.map($('.thead-first-row').children('th:not(.large)'), function(val){ return $(val).outerHeight(); }); // console.log(listHeight); $('.table-flip-scroll tbody tr:not(.sort)').each(function(){ var count = 0; $(this).children('td').each(function(){ $(this).css('height', listHeight[count ++] + 'px'); }); }); |
Version SASS de 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
|
/* flip-scroll table */ .flip-scroll { .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .cf { zoom: 1; } *:first-child+html .cf { zoom: 1; } table { width: 100%; border-collapse: collapse; border-spacing: 0; } th, td { margin: 0; vertical-align: top; } th { text-align: left; } table { display: block; position: relative; width: 100%; } thead { display: block; float: left; } tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; } thead tr { display: block; } th { display: block; text-align: right; } tbody tr { display: inline-block; vertical-align: top; } td { display: block; min-height: 1.25em; text-align: left; } /* sort out borders */ th { border-bottom: 0; border-left: 0; } td { border-left: 0; border-right: 0; border-bottom: 0; } tbody tr { border-left: 1px solid #babcbf; } th:last-child, td:last-child { border-bottom: 1px solid #babcbf; } } |
Version SASS de No More Tables
Source : http://elvery.net/demo/responsive-tables/#no-more-tables.
Attention : ajouter un !important à td { padding-left: 50%; }
si vous utilisez Twitter Bootstrap pour styler vos tableaux.
Ajout d’une classe .ignore
à placer sur les <td />
qui ne doivent pas faire l’objet d’une transformation. La rangée du tableau transformé n’aura alors pas de libellé (en-tête).
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
|
/* no-more-tables table */ .no-more-tables { /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid $table-border-color; margin-bottom: $padding-base-vertical; } td { /* Behave like a "row" */ border: none; border-bottom: 1px solid $table-border-color; position: relative; padding-left: 50% !important; white-space: normal; text-align:left; &.ignore { padding-left: $table-cell-padding !important; } } td:not(.ignore):before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: $table-cell-padding; left: $table-cell-padding; width: 45%; padding-right: 10px; white-space: nowrap; text-align:left; font-weight: bold; } /* Label the data */ td:not(.ignore):before { content: attr(data-title) ' :'; color: $brand-quaternary; } } @media (min-width: $screen-xs1) { .no-more-tables { td { padding-left: 30% !important; } td:not(.ignore):before { width: 25%; } } } |
En utilisant display: block; et les data attributes HTML5 :
Source : http://codepen.io/geoffyuen/pen/FCBEg.
Simulation : http://jsfiddle.net/frontenddeveloper/gf7R3/.
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
|
<table class="rwd-table"> <tr> <th>Movie Title</th> <th>Genre</th> <th>Year</th> <th>Gross</th> </tr> <tr> <td data-th="Movie Title">Star Wars</td> <td data-th="Genre">Adventure, Sci-fi</td> <td data-th="Year">1977</td> <td data-th="Gross">$460,935,665</td> </tr> <tr> <td data-th="Movie Title">Howard The Duck</td> <td data-th="Genre">"Comedy"</td> <td data-th="Year">1986</td> <td data-th="Gross">$16,295,774</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> </table> |
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
|
.rwd-table { min-width: 300px; } .rwd-table th { display: none; } .rwd-table td { display: block; } .rwd-table td:first-child { padding-top: .5em; } .rwd-table td:last-child { padding-bottom: .5em; } .rwd-table td:before { content: attr(data-th) ": "; width: 6.5em; display: inline-block; } @media (min-width: 480px) { .rwd-table td:before { display: none; } } .rwd-table th, .rwd-table td { text-align: left; } @media (min-width: 480px) { .rwd-table th, .rwd-table td { display: table-cell; padding: .25em .5em; } .rwd-table th:first-child, .rwd-table td:first-child { padding-left: 0; } .rwd-table th:last-child, .rwd-table td:last-child { padding-right: 0; } } |
Mixin SASS
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
|
@mixin rwd-table() { min-width: 300px; th { display: none; } td { display: block; padding: 5px 10px !important; } td:first-child { // padding-top: .5em; } td:last-child { // padding-bottom: .5em; } td:before { // content: attr(data-th) ": "; content: attr(data-th); width: 6.5em; display: inline-block; font-family: $site-bold-font-family; color: $site-font-color-darker; } @media (min-width: $screen-sm-min) { td:before { display: none; } } th, td { text-align: left; } @media (min-width: $screen-sm-min) { th, td { display: table-cell; // padding: .25em .5em; } th:first-child, td:first-child { padding-left: 0; } th:last-child, td:last-child { padding-right: 0; } } } |