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.