Table HTML - colonnes de largeur fixe et scroll horizontal

Question

J'ai besoin de créer un tableau HTML qui a des largeurs de colonnes fixes, disons 200px pour chaque colonne. Si la table dépasse la largeur horizontale de la fenêtre du navigateur, il doit y avoir un défilement horizontal pour afficher les colonnes hors écran. Comme la table est générée dynamiquement à partir d'une base de données, il y aura un nombre indéterminé de colonnes à chaque fois, de sorte que la largeur totale de la table ne peut pas être définie à l'avance.

En résumé, je cherche un moyen de simplement définir une largeur de colonne fixe et ensuite dire à la table de défiler horizontalement si elle est à court d'espace horizontal. Toute suggestion serait appréciée!

Answer 1

J'ai un exemple jsFiddle de ce qui est possible: jsFiddle table scrolling

Tables ne peuvent pas se défiler (parce qu'ils ne overflow), mais si vous mettez un wrapper autour d'elle les utilisateurs peuvent faire défiler horizontalement (ou verticalement). Cependant: Si vous ne pouvez pas donner à votre table une largeur fixe, il remplira juste autant d'espace qu'il peut trouver. Mais ça ne déborde pas son parent. Même si les cellules de table ont une largeur fixe. Mais à mon avis, si vous générez ces cellules avec cette largeur, vous pouvez calculer la largeur totale que la table devrait être. Utilisez cette valeur (I.E 1000px) pour créer un débordement sur l'encapsuleur.