Tableau:width auto, fonctionne mal si texte sur plusieurs lignes

Salut, merci

Oui je voulais le préciser mais j'ai oublié de préciser : je ne souhaite pas couper mes lignes avec des <BR>
Je souhaite que le centrage se fasse correctement sans avoir a déterminer moi même à quel moment couper les lignes (le texte vient d'une base de donnée et peut donc être variable.

Le css devrait bien pouvoir faire ça

Salut,
Je ne comprends pas bien ta solution,

j'ai essayé de mettre une max-width et du coup ça définit un seuil à partir duquel la taille devient complètement fixe (quel que soit le contenu)

Mais ce que je souhaite c'est simplement centrer le tableau, et dans le cas où sont contenu occuperait 100% de l'espace, dans ce cas là il est normal qu'il occupe toute la place.

Le tableau que j'essaie de centrer est dynamique, il n'a pas de taille fixe ni de taille max.
Seul son conteneur (ici, le <TD> d'un autre tableau) a un width fixe



Donc la taille du tableau dépend de la longueur de sa plus grande ligne.

Mais si la longueur de cette grande ligne dépasse celle prévue par le conteneur de taille fixe, alors elle est coupée en 2 lignes plus petites, c'est normal. Sauf dans ce cas la longueur du tableau reste à 100% au lieu de déterminer la nouvelle plus longue ligne après coupure.

Dites moi si je ne suis pas assez clair :) mais sinon en testant l'exemple que j'ai donné c'est assez parlant

Ton exemple est tout a fait clair mais j'avoue ne pas avoir trouvé de solution élégante et efficace.

Suite à quelques recherches, j'ai pu remarquer que gérer des longs textes dans un tableau pose souvent problème.
Et malgré les nombreuses propriétés css disponibles (word-wrap, white-space, text-overflow, table-layout...) je ne parviens pas à résoudre de manière propre ton problème.

Finalement en testant plusieurs solutions, j'ai réussi par hasard à avoir le résultat attendue, mais je ne te garantie pas que cette solution soit fiable :

<table style="" border="1"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; text-align: left;">a<br>
</td>
<td style="vertical-align: top; text-align: left;">b<br>
</td>
<td style="vertical-align: top; text-align: left;">c<br>
</td>
<td style="vertical-align: top; text-align: center; width: 110px;">
<table border=1 style="margin: auto;">
<tbody>
<tr>
<td style="text-align: left;">aazzzz</td>
</tr>
<tr>
<td style="text-align: left; width: 1px;">aazzzzzzz aazzzzzzz</td>
</tr>
<tr>
<td style="text-align: left;">aazzz</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

En ajoutant un simple "width: 1px" sur la cellule concernée, cette dernière ajuste bien sa largeur en fonction du contenu lorsque celui-ci passe sur deux lignes.

Ah oui, merci !

Ça à l'air de bien marcher, mais je crois que j'avais déjà exploré cette solution mais pas retenue à cause d'un effet de bord, mais je me souviens plus... peut être que ça passait mal sous IE8

Je testerai demain :)

Rebonjour !

Alors j'ai testé et effectivement ça ne fonctionne pas comme il faut

Dans mon exemple j'ajoute un champ qui contient "mot1 mot2". Normalement, "mot1 mot2" peut largement tenir sur une ligne
Mais en mettant le width: 1px; on dirait qu'il détermine que la ligne avec 'aazzzzzz aazzzzzz' reste la plus grande, même si elle s'affiche sur 2, du coup la largeur du tableau est retaillée pour "aazzzzzz" et j'ai mon "mot1 mot2" qui se retrouve sur 2 lignes.... c'est encore pire.
C'est comme si la taille max du tableau était fixée à celle de "aazzzzzzz". Comportement vraiment très bizarre qui fait penser à un bug.

<table style="" border="1"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; text-align: left;">a<br>
</td>
<td style="vertical-align: top; text-align: left;">b<br>
</td>
<td style="vertical-align: top; text-align: left;">c<br>
</td>
<td style="vertical-align: top; text-align: center; width: 110px;">
<table border=1 style="margin: auto;">
<tbody>
<tr>
<td style="text-align: left;">mot1 mot2</td>
</tr>
<tr>
<td style="text-align: left; width: 1px;">aazzzzzzz aazzzzzzz</td>
</tr>
<tr>
<td style="text-align: left;">aazzz</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

Oui c'est du bricolage bancale.

Je ne sais pas donc pas si c'est possible en css, mais je pense que c'est relativement facile à mettre en place avec soit un traitement en php, soit un traitement avec javascript.