Je suis en train d'écrire une application web utilisant la fondation Zurb et j'ai rencontré un petit problème.Zurb Foundation - Table réactive avec en-tête fixe et première et dernière colonne fixes
Je dois être en mesure d'avoir une table responsive avec un en-tête fixe et fixe les première et dernière colonnes avec les autres colonnes entre scrollable lorsque la largeur est trop petite.
Est-ce possible avec juste CSS?
Consultez cette JSFiddle pour trouver une solution à votre problème. Réduisez votre écran pour voir l'effet que vous vouliez. Le seul problème est que lorsque l'en-tête est corrigé, il ne défile pas correctement. Vous pouvez supprimer la classe fixed-header de la table pour supprimer l'effet d'en-tête fixe, auquel cas le défilement horizontal fonctionnera correctement.
AVERTISSEMENT: Personnellement, je ne recommanderais pas cette approche, parce que l'utilisateur aurait à savoir qu'il ya des colonnes supplémentaires pour faire défiler. De plus, l'utilisateur peut même ne pas savoir comment afficher les colonnes cachées (le défilement horizontal n'est pas intuitif pour les tableaux).
ALTERNATIVE: Je suppose que la raison d'être de cette approche est d'être en mesure de montrer une grande table sur un appareil mobile, auquel cas, je recommanderais une autre solution de l'effondrement de grandes tables en deux colonnes .
Extrayez l'extrait CodePen suivant. J'utilise cette stratégie tout le temps dans mes projets.