Une technique simple et accessible pour des tableaux responsive
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:
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:
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:
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 !
