[CSS] Des tableaux responsives en full CSS

Ressources en ligne :

Responsive Data Tables sur CSS Tricks. Un tableau qui permute les en-têtes sur la 1ère colonne en mobile.
Attention, ne fonctionnera PAS pour des sites multilingues, à moins peut-être de passer le contenu localisé (texte inclus dans la CSS pour cet exemple) via du JS peut-être?
CSS Tricks – Responsive Data Table Roundup
Demo of Tablesaw : A group of plugins for responsive tables.
Responsive table with vertical and horizontal headers, 2 (voir le CodePen)
Responsive Tables (Zurb) avec du JS.

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.

<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>

<table>

<thead>

<tr>

<th>Company</th>

<th class="numeric">Price</th>

<th class="numeric">Change</th>

<th class="numeric">Change %</th>

<th class="numeric">Volume</th>

</tr>

</thead>

<tbody>

<tr>

<td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>

</tr>

</tbody>

</table>

@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; }
}

@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');
      });
    });

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

/* 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; }
}

/* 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).

/* 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%;
    }
  }
}

/* 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/.

<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>

<tr>

<th>Movie Title</th>

<th>Genre</th>

<th>Gross</th>

</tr>

<tr>

<td data-th="Genre">Adventure, Sci-fi</td>

</tr>

<tr>

<td data-th="Movie Title">Howard The Duck</td>

<td data-th="Genre">"Comedy"</td>

</tr>

<tr>

<td data-th="Movie Title">American Graffiti</td>

<td data-th="Genre">Comedy, Drama</td>

</tr>

</table>

.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;
  }
}

.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

@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;
    }
  }
}

@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;

}

Articles récents

Catégories

Archives

Méta

[CSS] Des tableaux responsives en full CSS

Ressources en ligne :

Deux exemples maison pour un tableau comparatif :

Tableau comparatif dont les éléments à comparer deviennent horizontalement scrollables en vue mobile

Tableau comparatif dont les éléments à comparer se désolidarisent pour s’empiler en vue mobile

En utilisant display: inline-block; sur les rangées et white-space: nowrap; sur le corps du tableau :

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.

Version SASS de flip-scroll

Version SASS de No More Tables

En utilisant display: block; et les data attributes HTML5 :

Mixin SASS