CSS only Responsive Tables – David Bushell – Web Design & Front-end Development (based in Manchester, UK)
▻http://dbushell.com/2016/03/04/css-only-responsive-tables
Four years ago I shared an idea to make tabular data responsive. Browser support was experimental and the workarounds were extremely hacky. I revisited the technique this week, cleaned it up, and I am pleased to say all modern browsers work perfectly.
Sur table.spip ? Possible oui (après on n’a pas de moyen de dire qu’on veut la version flip). Je pensais déjà au moins me l’ajouter à mon échafaudage Intégraal.
Je pense qu’il n’y a pas de contre-indication, on utilise déjà un truc similaire (mais moins bien, je vais changer) sur par ex ►https://research.science.ai/article/on-the-marginal-cost-of-scholarly-communication et dans l’ensemble ça a l’air de rouler. On n’a aucun contrôle sur les tables donc c’est nécessaire.
Je songeais à ajouter un bouton « Flip » (enfin ça en mieux grâce à notre designer) pour que les gens puissent réorienter eux-mêmes.
@fil @rastapopoulos on peut aussi proposer @tetue de l’intégrer dans #tinytypo ?
Il y a plusieurs approches possibles pour rendre un tableau consultable en petites largeurs : la linéarisation (que j’ai préférée sur le site tinytypo.tetue.net et qui doit de toute façon rester possible pour une bonne accessibilité) ou celle ci-dessus, par exemple.
Et plusieurs peuvent cohabiter, au sein d’un même site, en fonction du type de données tabulaires.
Aucune ne m’a semblé suffisamment générique pour constituer une bonne approche par défaut, pouvant être incorporée à la base minimale qu’est Tiny Typo (ou à SPIP).
Celle-ci est toutefois intéressante en ce qu’elle ne nécessite pas de div englobante, mais seulement l’apposition d’un sélecteur CSS sur l’élément table. À tester dans la vraie vie des sites.
Cela peut être porté dans SPIP, sous la forme d’un plugin dédié, de façon à l’expérimenter d’abord, dans la vraie vie des sites. Puis l’incorporer ultérieurement si ça s’avère être une vraie bonne idée.
