[CSS] Responsive design tableau

Pour les petits supports – comme les smartphones et les tablettes -, les tableaux deviennent souvent illisibles.


Il existe quelques astuces pour pouvoir les consulter de manière productive même sur les plus petits formats.
Il est possible de transformer le tableau entièrement et de lui donner un autre sens de lecture, grâce au CSS :

 

Droit Valeur alphanumérique Valeur octale Valeur binaire
Aucun droit 0 000
Exécution –x 1 001
Ecriture -w- 2 010
Ecriture et exécution -wx 3 011
Lecture seulement r– 4 100
Lecture et exécution r-x 5 101
Lecture et écriture rw- 6 110
Tous les droits rwx 7 111

 

En format large le tableau ressemblera à cela :

tableau-responsive-desktop

En format smartphone le tableau sera comme cela:

tableau-responsive-smartphone

Source