[HTML]Réduire la largeur d'une <td> au minimum

Bonjour à tous,

J'ai une <table> HTML avec plusieurs lignes <tr>, et deux colonne <td> à chaque ligne.
Je voudrais que ma première colonne ait la largeur minimum sans couper le texte (tous les mots doivent être sur une seule ligne).
Mon code :

Code:

---

1 2 3 4

<table> <tr> <td style="width: 1%" nowrap>colonne une</td> <td>colonne une</td>

---

J'ai utilisé : width: 1%, nowrap. Mais ça c'est pas commode parce qu'il faut que je l'écrive pour toutes les lignes !
- je ne peux pas utiliser le "width: auto; " parce que ça se positionne à 50%
- ni le "width: 100px;" ou "width: 20%" parce que ça ne vaudra pas la largeur minimum.

Quelqu'en connaîtrait-il une solution ?
Merci d'avance :)

et si tu metait tonn nowrap dans un CSS externe et associé à la balise TD ? il le ferai automatiquement dès qu'il rencontre cette balise :)

C'est tout à fait vrai. Seulement, il faudrait que j'écrive pour chaque <td> :
<td class="myClass" />.
Donc à priori, c'est très répétitif aussi, et c'est ce que je veux éviter.
A moins que je ne me trompe. Merci bien si vous avez une ptite idée :)

non, tu n'est pas obligé de définir une classe pour appliquer un CSS, tu peux définir un comportement par défaut :

Code:

---

1 2 3 4 5 6

td { ... tes propriétés ... }

---

Et hop, ça s'appliquera à toutes les balises TD ;)

Kikou toumimi :)

Effectivement je peux faire un CSS qui s'applique à tous les <td> mais c'est justement ce que je veux pas faire parce le CSS en question ne s'applique qu'à certains <td>.
Je suppose qu'il n'y a pas d'autre moyen que de répéter <td class="myclass" /> chaque fois que j'en ai besoin.
Merci bien à toi, et si qqn a une autre idée :)

autre solution...

on va dire que tu va appliquer un style bidon à ta balise TABLE

Code:

---

<table class="style_bidon">

---

tu va définir le CSS pour tes TD comme suit :

Code:

---

1 2 3

table #style_bidon td { ...tes styles... }

---

Et ça devrait le faire uniquement pour les TD dont la balise TABLE aura pour style style_bidon ;)

Citation:

---

Envoyé par titoumimi

autre solution...

on va dire que tu va appliquer un style bidon à ta balise TABLE

Code:

---

<table class="style_bidon">

---

tu va définir le CSS pour tes TD comme suit :

Code:

---

1 2 3

table #style_bidon td { ...tes styles... }

---

Et ça devrait le faire uniquement pour les TD dont la balise TABLE aura pour style style_bidon ;)

---

Code:

---

1 2 3

table#style_bidon td { ...tes styles... }

---

la version correcte ne devrait pas contenir d'espace car c'est table qui a la classe concernée et non un de ces descendants...

:oops: :oops: :oops: toutes mes excuses :oops: :oops: :oops:

j'ai l'impression que rodie voudrai, c'est selectionner le premier element td d'un tr.
j'ai alors pense au selecteur tr + td mais sans succes :/
si quelqu'un au passage avait une explication clair de ce selecteur.
Sinon la pseudo class :first-child

Code:

---

1 2 3

td:first-child { white-space: nowrap; }

---

Code:

---

1 2 3 4 5 6 7 8 9

<table width="200"> <tr> <td>cellule 1 assez longue</td> <td>deuxieme aussi mais qui devrai faire un retour a la ligne</td> </tr> <td>cellule 1 assez longue encore un peu plus</td> <td>deuxieme aussi mais qui devrai faire un retour a la ligne</td> </tr> </table>

---

Mais il faut pas esperer qu'IE6 y capte quelque chose.

une autre solution basée sur la structure html

Code:

---

1 2 3 4 5

tbody th { white-space: nowrap; text-align:left; font-weight: normal; }

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<table width="200"> <thead> <tr> <th>col 1</th> <th>cal 2</th> </tr> </thead> <tbody> <tr> <th>cellule 1 assez longue</th> <td>deuxieme aussi mais qui devrai faire un retour a la ligne</td> </tr> <th>cellule 1 assez longue encore un peu plus</th> <td>deuxieme aussi mais qui devrai faire un retour a la ligne</td> </tr></tbody> </table>

---

Pas bête, pas bête :)
J'ai essayé le <th> et ça marche bien.
Seulement, je tombe de malchance !!!
J'ai un gridView qui se construit automatiquement, et lui aussi contient des <th>, et il est inclu dans ma <table style="..."> qui contient le style sur les <th>.
Conséquence, les <th> de mon gridView ont le même style que les <th> de ma <table>.
Enfin, c'est pas grave, je vais m'arranger :)
Merci beaucoup à vous !!!