Discussion :

[SylvainPV]

Bonjour,

Je partage une de mes trouvailles pour rendre facilement lisible des tableaux sur les petits écrans. L'idée est de transposer le sens de lecture du tableau, d'inverser les lignes et colonnes en somme. Pour ce faire, je me sers d'un data-attribute et de td:before { content: attr(data-headers); }. C'est facile à implémenter, accessible, très performant et avec un excellent support. Mieux que tout ce que j'ai pu trouver jusqu'à ce jour comme solutions pour des tableaux responsive.

Démo ici

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<table>
    <thead>
    <tr>
        <th id="th-appareil">Appareil</th>
        <th id="th-largeur">Largeur en pixels physiques</th>
        <th id="th-hauteur">Hauteur en pixels physiques</th>
        <th id="th-device-width">Device-width</th>
        <th id="th-device-height">Device-height</th>
        <th id="th-ppcm">Densité de pixels en ppcm</th>
        <th id="th-ratio">Ratio</th>
    </tr>    
    </thead>
    <tbody>
    <tr>
        <td headers="th-appareil">Apple iPhone 5</td>
        <td headers="th-largeur">640</td>
        <td headers="th-hauteur">1136</td>
        <td headers="th-device-width">320</td>
        <td headers="th-device-height">533</td>
        <td headers="th-ppcm">128</td>
        <td headers="th-ratio">2</td>
    </tr>
        <tr>
        <td headers="th-appareil">Apple iPhone 4</td>
        <td headers="th-largeur">640</td>
        <td headers="th-hauteur">960</td>
        <td headers="th-device-width">320</td>
        <td headers="th-device-height">480</td>
        <td headers="th-ppcm">128</td>
        <td headers="th-ratio">2</td>
    </tr>
        <tr>
        <td headers="th-appareil">Apple iPhone 3</td>
        <td headers="th-largeur">320</td>
        <td headers="th-hauteur">480</td>
        <td headers="th-device-width">320</td>
        <td headers="th-device-height">480</td>
        <td headers="th-ppcm">64</td>
        <td headers="th-ratio">1</td>
    </tr>
    </tbody>
</table>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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
table, td, th { 
  border: 1px solid black;
   border-collapse: collapse;
   text-align: center;
}
 
 
th { border-bottom-width: 2px; }
tr:nth-child(even){ background-color: #eee; }
 
 
@media (max-width: 40em) {
   table, tbody { display: block; }
   tr {
      display: table;
      width: 100%;
   }
   th {
      font-size: 0;
      border: none;
      visibility: hidden;
   }
   td, th { display: table-row; }
   td:before {
      content: attr(data-headers);
      display: table-cell;
      width: 60%;
      border-right:  1px solid black;      
   }
}

Il faut compléter le data-attribute avec le label de la colonne. On peut le faire manuellement dans le HTML, ou alors utiliser une petite fonction JavaScript qui le fait à notre place par le biais de l'attribut headers des td.

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
var tds = document.getElementsByTagName("td");
    for(var i=0; i<tds.length; i++){
        var td = tds[i];
        if(td.hasAttribute("headers")){
            var th = document.getElementById(td.getAttribute("headers"));
            if(th != null){
                td.setAttribute("data-headers", th.textContent);
            }
        }        
    }

Si vous avez d'autres idées, faites partager !

[rodolphebrd]

Merci Sylvain pour ce partage.
C'est en effet une belle trouvaille qui ôte de belles prises de tête.

J'ajoute un Codepen pour ceux qui veulent avoir un aperçu rapide de ton exemple : http://codepen.io/anon/pen/vrFKA

Gageons que ça ne (re)donne pas envie de faire des mises en page en tableau.

[Invité]

Bien vu.
Ca semble prometteur et performant.
Ca va sans doute m'enlever une épine du pied, pour proposer des affichages tabulaires.

[EDIT] (Après test rapide) Quand on a plusieurs tableaux sur la même page, avec des entêtes différents :
il faut faire attention à changer les libellés des id="..." et headers="...".

@SylvainPV
Tu en as sous le chapeau !

[Invité]

Bonjour
Joomla! 3.4.1 - Tableau responsive

Il faut compléter le data-attribute avec le label de la colonne. On peut le faire manuellement dans le HTML,

Comment intégrer ce code svp ? Manuellement dans la page .php du templates ?
Le code var tds = document.getElementsByTagName("td");....etc,
ou le code de la page démo plus complet, ajout de function makeTablesResponsive(){.........makeTablesResponsive();?

ou alors utiliser une petite fonction JavaScript qui le fait à notre place par le biais de l'attribut headers des td.

Item. Pas compris!

Merci de votre aide & bonne journée.

[SylvainPV]

Le code JavaScript sert uniquement à mettre automatiquement ces attributs data-headers. Si tu le fais manuellement, pas besoin de JavaScript.

Utilise l'inspecteur du DOM de ton navigateur sur la page de démo pour regarder à quel endroit sont ajoutés ces attributs.

[mathieu]

merci SylvainPV pour cet effet responsif très sympathique.

[Invité]

Bonjour

Réponse tardive pour cause d'absence.
Je vais regarder ça dans la journée.
Merci & bonne journée

[Invité]

Bonjour,

je déterre le sujet, puisqu'en fouillant dans mes codepen, je suis retombé dessus...
Du coup, je me suis re-penché dessus...

1- Et j'ai "trouvé" (?) une façon SIMPLE de faire, SANS data-xxx ni id : https://codepen.io/jreaux62/pen/ywjJE

On part de <table> normale(s) *, et on leur ajoute la classe "table-responsive" :

* Structure HTML "classique", SANS cellules fusionnées (sans colspan/rowspan).

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<table class="table-responsive">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table> 
 
<br />
 
<table class="table-responsive">
    <thead>
    <tr>
        <th>Appareil</th>
        <th>Largeur en pixels physiques</th>
        <th>Hauteur en pixels physiques</th>
        <th>Device-width</th>
        <th>Device-height</th>
        <th>Densité de pixels en ppcm</th>
        <th>Ratio</th>
    </tr>    
    </thead>
    <tbody>
    <tr>
        <td>Apple iPhone 5</td>
        <td>640</td>
        <td>1136</td>
        <td>320</td>
        <td>533</td>
        <td>128</td>
        <td>2</td>
    </tr>
        <tr>
        <td>Apple iPhone 4</td>
        <td>640</td> 
        <td>960</td>
        <td>320</td>
        <td>480</td>
        <td>128</td>
        <td>2</td>  
    </tr>
        <tr>
        <td>Apple iPhone 3</td>
        <td>320</td>
        <td>480</td>
        <td>320</td>
        <td>480</td>
        <td>64</td>
        <td>1</td>
    </tr>
    </tbody>
</table>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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
table.table-responsive {
  margin:0 auto;
  border-collapse: collapse;
}
table.table-responsive td, 
table.table-responsive th { 
  border: 1px solid black;
  text-align: center;
  padding:10px;
}
table.table-responsive th { background-color: #666; color:#fff; }
table.table-responsive tr:nth-child(odd){ background-color: #eee; }
table.table-responsive td ins { display:none; }
 
/* PHONE -> table change de mise en page */
@media (max-width: 768px) {
  table.table-responsive, 
  table.table-responsive tbody { 
    display: block; 
  }
  table.table-responsive tr {
    display: table;
    width: 100%;
  }
  table.table-responsive thead,
  table.table-responsive th,
  table.table-responsive tr th {
    display:none;
  }
  table.table-responsive td, 
  table.table-responsive th { display: table-row; }
  table.table-responsive td ins {
    padding:10px;
    background-color: #666; 
    color:#fff;
    display: table-cell;
    width: 60%;
    border-right:  1px solid black;   
    text-decoration:none;
  }
}

N.B. Au lieu d'utiliser :before, j'ai dû créer des balises <ins>.

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function makeTablesResponsive( id_table='table' )
{   
  var tables = document.querySelectorAll(id_table);
  tables.forEach( function(table){
    var ths = table.querySelectorAll('th');
    var trs = table.querySelectorAll('tr');
    trs.forEach( function(tr, index){
      var tds = tr.querySelectorAll('td');
      tds.forEach( function(td, index){
        var ins = document.createElement('ins');
        ins.textContent = ths[index].textContent;
        td.insertAdjacentElement('afterbegin', ins);
      });
    });
  });
}
// --------------------
// en fin de chargement 
window.addEventListener("DOMContentLoaded", (event) => {
  makeTablesResponsive('table.table-responsive');
});

2- Et voici une AUTRE manière de faire : https://codepen.io/jreaux62/pen/doGpGK
(retrouvée aussi dans mes "archives codepen", et issue d'une autre discussion)

[SylvainPV]

Oui on peut omettre les id à condition que chaque td ait comme header le th de son index correspondant. Si un td a un colspan supérieur à 1, ça ne fonctionne plus, il y aura un décalage. C'est pour ça qu'à l'époque j'avais privilégié la déclaration explicite avec l'attribut headers, il me semble.

Pour le choix data-attribute vs balise <ins>, je pense que ça n'a pas d'incidence. Peut-être pour l'accessibilité ? Pas sûr de savoir quelle approche privilégier.