28173 sujets

CSS et mise en forme, CSS3

[RESOLU] Cellules fixées + scroll

Bonjour à tous,

Je viens solociter votre aide pour un pb qui me parait incompréhensible, j'ai un tableau avec des cellules de taille fixée et lorsque mon tableau s'élargis (avec un scroll horizontal donc) elles sont malgrés tout réduites.

Mon architecture simplifiée est la suivante (de tête) :


<body>
<div class=entete>
<table>
 <tr>
  <td class=col1>colonne1</td>
  ...
 </tr>
</table>
</div>
<div class=contenu>
<table>
 <tr>
  <td class=col1>contenu colonne1</td>
  ...
 </tr>
</table>
</div>

CSS :

body { overflow-y : hidden; overflow-x : auto }

.col1 { witdh = XXX px }


Donc quand mon tableau de dépasse pas la largeur de la page tout est OK, par contre quand je commence a avoir pas mal de colonnes, ma page passe en overflow auto, ce que je désire mais dés lors, mes cellules ne font plus la taille fixée dans le CSS mais sont réduites.

Une idée ?

Merci
Modifié par soussou63 (05 Jun 2007 - 19:17)
Bonjour et bienvenue,
Pour que quelqu'un puisse se pencher sur ton problème et te conseiller en conséquence, tu dois au moins donner la totalité du code XHTML/CSS,
voire mieux: un lien.

Pour info, les propriétés CSS overflow-y et x sont des extension CSS
propriétaire microsoft, cela ne devrait donc fonctionner que sur IE.
Il faudra attendre CSS3 avant de pouvoir les utiliser.
Bonjour Hermann

J'utilise le overflow-x / y sous FF et jusque la ca marche LoL, mais je vais voir pour eviter ca tant que c'est pas totalement normalisé.

Voila les liens :
page sans dépassement de contenu
page avec dépassement de contenu
CSS (identique pour les 2 fichiers du dessus)

Mon objectif est donc d'avoir un déplacement horizontal sans réduction des cellules.

Je précise que j'ai l'entete de tableau qui est dans un div séparé (peut etre la cause du pb ?!) pour conserver en entete fixe lorsque j'ai de nombreuses lignes (et donc un scroll vertical).
Modifié par soussou63 (02 Jun 2007 - 14:45)
Bonjour,
Commence par mettre un doctype qui ne fait pas basculer les navigateurs récents en mode quirks (appelé aussi mode natif ou mode de compatibilté descendante > non standard). Pour choisir ton doctype.
Il se peut qu'en mode standard les propriétés overflow-y et x ne fonctionnent plus.
Ensuite ta largeur de ton tableau fait 100% (de la largeur de l'ecran)
donc si tu veux avoir des cellules qui conservent leur taille, peut-être qu'il
faudrait donner une largeur fixe à ta table.
Modifié par Hermann (02 Jun 2007 - 20:13)
soussou63 a écrit :
100 % c'est la dimension de l'écran ou celle du conteneur parent ?

À priori celle du conteneur parent.

Sinon, tu vas inévitablement avoir des problèmes avec tes deux tableaux. Si tu veux que tes en-têtes soient bien alignés avec tes colonnes de données, il n'y a pas de secret : il faut faire un seul tableau, pas deux.
oui je sais qu'avec 2 tableau c'est pas evident, mais c'est le seul moyen que j'ai trouvé pour avoir mes entetes de colonnes fixes lorsque j'ai plusieurs pages de lignes.

Si vous avez un autre idée pour faire ca *> Je suis preneur xD

La premiere complication c'est déjà l'ascenseur horizontal sur le contenu qui provoque un décalage Smiley ohwell

EDIT : J'ai trouvé a en faisant une nouvelle recherche, je teste Smiley smile
"[Résolu] Garder les entetes de tableau avec un CSS overflow"
Modifié par soussou63 (04 Jun 2007 - 20:05)
Donc mon pb est résolu grace a votre aide et ce topic :
[Résolu] Garder les entetes de tableau avec un CSS overflow

Donc la solution est bien de :
- Utiliser le th / thead pour bénéficier d'un entete fixe sans problème de décalage des colonnes
- Gérer le scroll sur chaque axe dans des conteneurs différents (overflow : auto + width ou height fixe)
- Doctype stricte pour pas mélanger les normes et les pseudos capacités des navigateurs.

Une fois de plus "Merci Alsa !"
Salut

J'ai beau appliqué toutes les consignes, rien à faire.
A chaque fois, la hauteur du tbody indiqué dans le CSS correspond à la hauteur de chacune des lignes du tableau...
Il n'y a pas de prise en compte du tbody comme un bloc à part entière
Aucune barre de défilement n'apparait à part celle d'IE mais ce n'est pas ce que je recherche puisque l'en-tête n'est pas fixe ...

Est-ce que quelqu'un pourrait envoyer un lien vers une page contenant un tableau avec en-tête fixe pour que je puisse m'en inspirer ?

Merci d'avance
Bonjour Frappier

As tu vérifier que tu n'applique pas plusieurs styles concurents au meme élément ?

Du genre, une taille sur tes balises <th> qui s'opposerai a une taille sur ton <tbody> ou ton <table>. Ca arrive facilement si ta css n'est pas claire et encore plus si tu as la "mauvaise" habitude d'avoir une partie des styles dans ta page HTML et le reste dans ta feuille de style.

Essaie de vérifier que toutes tes tailles sont définies au meme endroit, et que tu ne la définie pas deux fois, une fois sur la balise et une deuxieme fois sur une balise parent.
Merci de ta réponse rapide soussou63

Pour répondre à ta question, je me suis fait une page de test simplement en reprenant le code donné dans le topic
Je n'ai donc qu'une simple feuille de style et une page html de base qui ne contient que la table du topic.
Il n'y a donc pas d'interaction entre styles concurrents.

J'ai essayé différent doctype, j'ai essayé aussi d'inclure la table dans un div mais je n'y arrive décidément pas.
J'avoue ne plus trop savoir quoi faire ...
Sujet clos
Aller à