Discussion :

[Rodie]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[titoumimi]

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

[Rodie]

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

[titoumimi]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
td {
     ...
     tes propriétés
     ...
}

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

[Rodie]

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

[titoumimi]

autre solution...

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<table class="style_bidon">

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[MasterOfChakhaL]

autre solution...

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<table class="style_bidon">

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

[titoumimi]

toutes mes excuses

[masu]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
td:first-child {
	white-space: nowrap;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
tbody th {
	white-space: nowrap;
	text-align:left;
	font-weight: normal;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[Rodie]

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 !!!