Tableaux qui se déforment

[Nullette]

Bonjour,

j'ai une page avec des tableaux. Il s'agit d'une sorte d'agenda avec des dates.

Lorsque j'ai plusieurs tables (en ce moment mars, avril, mai), il arrive que celles-ci ne sont pas identiques (on le voit à cause du bord), à cause, je suppose, de la longueur du texte.

Le code css est :

.tableorange {
border-collapse : collapse;
margin : auto;
}
.tableorange th {
background-color : #ffcc33;
}
.tableorange td, .tableorange th {
border : thin solid #999999;
padding : 4px;
vertical-align : top;
border-collapse : collapse;
}
.tableorange caption {
margin : auto;
font-size : 1.2em;
font-variant : small-caps;
}

Connaîtriez-vous L' astuce ?

[MarvinLeRouge]

Salut,

On pourrait plus facilement répondre à ta question avec l'adresse d'une page de test.

[Nullette]

Ce n'est pas une page test, c'est toujours mon seul et unique petit site

Cellules décalées d'avril et mai

[baulet]

firefox 3.6.16 linux = décalé

chromium (chrome) linux = pas décalé

comprenne que pourra

[Nullette]

Avec IE 8, moins décalé

et avec Mozilla 4 = décalé !

Ca s'arrangera quand je ne mettrai les dates que pour un mois, deux au maximum

[baulet]

la solution est peut être de faire un seul tableau, avec un style (classe) particulier pour les mois?

comme cela les cellules seront forcément alignées.

[Dadou]

Tout simplement imposer une largeur aux cellules, la tu laisses le navigateur choisir

[Nullette]

Tout simplement imposer une largeur aux cellules, la tu laisses le navigateur choisir

Pourtant la largeur est indiquée dans la partie html :

<tr> 
      	<th width="13%" id="header09">Date</th>
      	<th width="30%" id="header10">Sujet</th>
      	<th width="25%" id="header11">Lieu</th>
      	<th width="32%" id="header12"><abbr title="Observations">Obs</abbr></th>
    	</tr>

[nterrenet]

Pourtant la largeur est indiquée dans la partie html :

<tr> 
      	<th width="13%" id="header09">Date</th>
      	<th width="30%" id="header10">Sujet</th>
      	<th width="25%" id="header11">Lieu</th>
      	<th width="32%" id="header12"><abbr title="Observations">Obs</abbr></th>
    	</tr>

Bonjour,

tu devrais vérifier que tu n'as pas de texte ou d'image qui soit plus grand que la valeur que tu donne.

Modifié 28 Mars 2011 par nterrenet

[MarvinLeRouge]

Salut,

Impose la largeur des cellules dans tes css

Bloque tout contenu de cellule à un max-width inférieur ou égale à celui de la cellule

Sois cohérent dans tes unités (pourcentage ou px)

Remets ton site en 960px de large minimum, et une largeur proportionnelle à l'écran (genre 80 ou 90%) centré

... et le monde t'appartiendra ! (en fait non, je te le louerai, mais ça restera entre nous)

[Nullette]

Bloque tout contenu de cellule à un max-width inférieur ou égale à celui de la cellule

Salut,

et comment on fait pour bloquer une cellule à un max-width ? Il y a déjà le pourcentage pour les td.

tu devrais vérifier que tu n'as pas de texte ou d'image qui soit plus grand que la valeur que tu donne.

Les images ne dépassent pas 120 px et d'ailleurs il y a les mêmes images dans deux des tableaux.

Quant à ce que le texte soit plus grand (?), je ne sais pas comment le vérifier. Normalement les phrases longues devraient aller automatiquement à la ligne.

Entre nous...la location du monde...pas mal

[Nullette]

Le décalage est dû au fait que, dans la colonne de gauche (les dates), justement le texte ne va pas automatiquement à la ligne.

Ne sachant pas comment modifier le style css, j''ai donc abrégé les phrases et les tableaux ne sont plus décalés.

[MarvinLeRouge]

Si tu indiques une largeur dans tes css, le texte va à la ligne (pour peu qu'il y ait un espace blanc pour que le navigateur puisse faire un retour chariot).

[Nullette]

Je ne sais pas comment indiquer la largeur de chaque cellule du tableau dans les css.

[MarvinLeRouge]

Bah tu colles une classe à tes td, et tu décris cette classe dans les css.

[Nullette]

Je devrais créer une classe pour toutes les td, en mettant les dimensions pour chaque cellule.

Je laisse comme ça et, merci quand même.