[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]

Dadou, le 28 mars 2011 - 08:09, dit :

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]

Nullette, le 28 mars 2011 - 08:47, dit :

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.

Ce message a été modifié par nterrenet - 28 mars 2011 - 10:34.

[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]

MarvinLeRouge, le 28 mars 2011 - 12:17, dit :

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.

nterrenet, le 28 mars 2011 - 10:32, dit :

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.