uda-fewd:responsive_web_design_fundamentals:responsive_tables_-_no_more_tables
exemple en ligne : http://codepen.io/JohnMav/pen/BoGJNy?editors=0100
on 'collapse' les données qui prennent alors la forme d'une liste à opposer à la forme tableau
pro : toutes les données visibles et non cachées
@media screend and (max-width: 500px) { table, thead, tbody, th, td, tr { display: block; } }
on souhaite aussi virer les table header, mais pas avec un display non sinon plus accessible avec la lecture vocale :
thead tr { position: absolute; top: -9999px; left: -9999px; }
on va décaler nos td vers la droite pour faire de la place car on veut utiliser ::before pour insérer des infos sur les contenus
td { position: relative; padding-left: 50%; }
puis on récupère le contenu de l'attribut data-th pour l'afficher avec ::before
td:before { position: absolute; left: 6px; content: attr(data-th); font-weight: bold; }
uda-fewd/responsive_web_design_fundamentals/responsive_tables_-_no_more_tables.txt · Last modified: 2017/04/02 13:17 by leo