Comment obtenir une colonne de largeur fixe ?

Version imprimable

Bonjour,
Code:

1 2 3 4 5 6 7 8 <table border=1 width=20% height=20%> <tr> <td width=33% bgcolor=#ffffff></td> <td width=33% bgcolor=#000000></td> <td width=33% bgcolor=#AAAAAA></td> </tr> </table>
Code:

1 2 3 4 5 6 7 8 <table border=1 width=20% height=20%> <tr> <td width=33% bgcolor=#ffffff>blablablablablablablablabla</td> <td width=33% bgcolor=#000000></td> <td width=33% bgcolor=#AAAAAA></td> </tr> </table>
Dans l'exemple2 la taille 33% de chaque colonne est rompu.
La chaine de caractère blablabla... s'affiche sur une seule ligne car ne contient pas d'espace. Comment forcer le retour à la ligne en fin de cellule ?? ( sachant que je ne veux pas spécifier de taille en dur pour mes cellules mais rester en pourcentage )

Merci

Bien sur que c'est respecté :

Code:

1
2
3
4
5
6
7
<table border=1 width=20% height=20%>
	<tr>
		<td width=33% bgcolor=#ffffff>blablablablablablablablabla</td>
		<td width=33% bgcolor=#000000>blablablablablablablablabla</td>
		<td width=33% bgcolor=#AAAAAA>blablablablablablablablabla</td>
	</tr>
</table>

Citation:
Envoyé par blueice
Bien sur que c'est respecté :
Code:

1 2 3 4 5 6 7 <table border=1 width=20% height=20%> <tr> <td width=33% bgcolor=#ffffff>blablablablablablablablabla</td> <td width=33% bgcolor=#000000>blablablablablablablablabla</td> <td width=33% bgcolor=#AAAAAA>blablablablablablablablabla</td> </tr> </table>
oui enfin la ça n'a plus rien à voir avec mon exemple ...
ça ne m'explique pas pourquoi et comment faire des colonnes de 33% chacune dans le cas de mon exemple2

05/09/2006, 09h36
MasterOfChakhaL

Citation:

Envoyé par blueice

Bien sur que c'est respecté :

A vrai dire, pour être respecté, il faut rajouter ceci dans ton élément table

Code:

style="table-layout:fixed;"

ca indique à ton tableau que la définition des tailles prime sur la taille déduite du contenu

Le problème, c'est que ce qui déborde va se chevaucher...
Une façon de contourner le problème est de rajouter ceci au style de tes élément td:

Code:

style { overflow:hidden }

Ceci va masquer ce qui dépasse...

Je ne sais pas pourquoi, mais overflow: scroll ou auto, qui rajoutent des barres de scroll (tout le temps ou automatiquement) ne fonctionne pas

tu peux éventuellement suivre ce sujet qui est similaire au tien:
Texte dans un tableau deroulant
05/09/2006, 09h37
marabout

Colonnes

N'oublie pas de mettre quelque chose dans toutes les cellules de ton tableau: si la cellule doit rester vide, met le caractère "espace insécable:

Code:

 

HTML n'aime pas briser les chaînes de caractères... ton texte est-il vraiment si long sans espace ? Ajoute quelques espaces dans ton blabla: ça ira mieux

3 pièce(s) jointe(s)

Bonjour,

Je rencontre de mon côté le problème inverse : je n'ai spécifié que la taille du tableau (en %), et je n'ai que deux cellules. La première cellule est correcte et la seconde (qui contient du texte et deux zones de saisie) ne s'adapte pas à la longueur du texte contenu, mais fait des renvois à la ligne.
En appliquant le conseil de MasterOfChakhaL :

Citation:

Envoyé par MasterOfChakhaL

A vrai dire, pour être respecté, il faut rajouter ceci dans ton élément table

Code:

style="table-layout:fixed;"

ca indique à ton tableau que la définition des tailles prime sur la taille déduite du contenu

ça marche sous Firefox, mais sous IE, la seconde cellule disparaît.

Je suis un peu perdu. Pouvez-vous, SVP, éclairer ma lanterne ?

Merci d'avance pour vos réponses

Explication : détail en image dans les fichiers *.gif
Code:

1 2 3 4 5 6 7 8 9 10 Première rédaction du code <table width="50%" cellpadding="2" > <caption style="text-align:left">Chiffres maxima</caption> <tr> <td>Valeurs (PAS/PAD)</td> <td><input type="text" size="4" name="ValeurPASMax" /> / <input type="text" tabindex="260" size="3" name="ValeurPADMax" /> mm Hg</td> </tr> </table>
Ce code est associé à l'image "tab1-Fx.GIF" en attaché.
Code:

1 2 3 4 5 6 7 8 9 10 Correction du code selon le conseil de MasterOfChakhaL <table width="50%" cellpadding="2" style="table-layout:fixed;"> <caption style="text-align:left">Chiffres maxima</caption> <tr> <td width="20%">Valeurs (PAS/PAD)</td> <td width="80%"><input type="text" size="4" name="ValeurPASMax" /> / <input type="text" tabindex="260" size="3" name="ValeurPADMax" /> mm Hg</td> </tr> </table>
Ce code est associé aux deux images "tab2-fx.gif" (pour Firefox) et "tab2-IE.gif" (pour Internet Explorer).