Contenu d'un bloc (table) scrollable horizontalement

Bonjour à tous,

il me semble avoir déjà fait ça, mais ou bien je me fourvoie, ou bien Alzheimer me guette...

Pour une application, j'ai un tableau de données qui peut être très large (beaucoup de colonnes).
Mon layout est fluide en largeur, càd que les blocs s'adaptent à la largeur de la fenêtre
Tout se passe bien, sauf... quand le tableau est très large.

Il pousse (logiquement) ses conteneur sà s'agrandir et donne une fenêtre scrollable horizontalement.

Allez, un petit schéma pour y voir plus clair.

- en haut, à gauche : la table est petite, pas de pb.
- en haut à droite : la table est large, elle pousse le conteneur.
- en bas: comportement souhaité : scroll horizontal du conteneur

Alors évidemment, si je fixe la largeur du conteneur en pixels, et lui mets un overflow:auto, tout va bien, ça scroll à l'intérieur.

Mais je ne veux pas lui fixer de largeur !
Sinon forcément, le layout n'est plus fluide.

Avez-vous des idées ?
Au pire, vu que toute l'appli est basée sur un framework javascript, je pourrais tenter de définir la largeur du conteneur en fonction de la largeur du viewport, mais bon, j'aurais aimé trouver une solution css-only...

Merci beaucoup !
Modifié par okpoubelle (31 Aug 2011 - 17:16)

Salut!

Je n'ai pas testé, donc je ne sais pas si ça fonctionne... Est-ce que tu as essayé de mettre une div en 100% à l'intérieur de ta cellule ? Avec un code de ce genre :

HTML :

<td>
<div class="full">blablabla</div>
</td>

CSS :

.full{
width:100%;
max-width:200px;
min-width:50px;
overflow:auto;
}

Bonne chance !

Merci de ta réponse, sarahhh,
mais le pb ne se situe pas à l'intérieur de la table, mais au niveau de son conteneur, qui doit etre scrollable en fonction de la taille de la table...

c'est pareil, tu donne une taille fixe au conteneur, tu le passe en overflow:auto;

okpoubelle a écrit :
Alors évidemment, si je fixe la largeur du conteneur en pixels, et lui mets un overflow:auto, tout va bien, ça scroll à l'intérieur.

Mais je ne veux pas lui fixer de largeur !
Sinon forcément, le layout n'est plus fluide.

Donner une taille fixe au conteneur, c'est justement ce que je ne veux pas faire.
Modifié par okpoubelle (01 Sep 2011 - 15:11)

Si tu mets ça :

#conteneur{
width:100%;
overflow:auto;
}

ça ne marche pas ?