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 !