Discussion :

[druidev]

Bonjour,

J'ai un tableau de largeur fixe (363px), mais de hauteur variable car celui-ci contiendra du texte dynamique de base de données. Je voudrais qu'il garde cette largeur fixe tout le temps, c'est-à-dire que le texte passe à la ligne lorsqu'il arrive au bout des 363px. J'ai bien mis un width="363" à ce td, mais rien n'y fait, en ajoutant du texte brut très long, il ne passe pas à la ligne, et déborde du tableau. J'ai également mis au tableau un width="363".
Comment faire pour rendre ce tableau de largeur fixe, mais de hauteur variable ?
Merci

[davcha]

Tu utilises un <input type="text"/> ou bien un <textarea></textarea> ?

[druidev]

Non en fait la partie dont je parle c'est le frontoffice, par exemple la partie où l'utilisateur pourra voir les news.
Ce cadre est par exemple une news, et comme les news seront toutes diiférentes, leur taille ne sera pas égale. C'est pour ca que je veux un <td> de largeur fixe, et de hauteur variable.

[franculo_caoulene]

Salut,

Il nous faut du code...

[druidev]

Salut,

En fait je m'explique.
J'ai une page news.php sur mon site, en simplifiant le code ressemble à ca:

Code :

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

1
2
3
4
5
6
7
8
 
<table>
 
<tr><td>Texte de la news</td></tr>
<tr><td>Texte de la news</td></tr>
<tr><td>Texte de la news</td></tr>
 
</table>

Les news sont donc prises de la base de données.
Le truc c'est que ces fameux <td></td> ont une largeur fixe:

Code :

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

<td width="363">texte de la news</td>

Il faut donc qu'ils s'allongent en hauteur pour contenir le texte...
J'ai mis une largeur fixe aux <td>, et mis un texte brut dans ce <td>, mais le texte ne passe pas à la ligne, il allonge le <td>....
Comment faire pour garder cette largeur fixe et faire que les <td> s'allongent en hauteur en fonction de la taille du texte de la news ?

Merci

[Sheriff]

Salut !
le générateur de code n'aurait pas inséré un nowrap par hasard parmi les attributs de tes td ?
sinon, attribue la largeur fixe au tableau conteneur et non au td.
tu peux aussi forcer en utilisant les style:

Code :

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

<td style="width:363px;">

@+

[Sub0]

Salut!

Je profite de ce sujet pour poser une question en rapport...
Comment faire pour que la cellule du tableau (ici vide) conserve sa largeur lorsqu'on redimensionne la largeur de la fenêtre du navigateur ? Parce-que lorsque je réduis cette largeur, la cellule se réduit aussi... A votre avis, est-ce que la propriété min-width pourrait aller ? Si oui, comment l'utiliser ? Sinon, je pensais utiliser le margin ou padding peut-être, qu'en pensez-vous ?

Par avance, merci de votre aide.

[Sub0]

Finalement j'ai trouvé une solution simple et efficace :
Pour être sûr de figer la largeur d'une cellule, il faut lui ajouter un contenu avec une largeur fixe, par exemple :

Code :

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

1
2
3
4
5
<td width="50px">
  <div style="width:50px;">
    <!-- le contenu ici -->
  </div>
</td>

L'utilisation du <div> semble être la plus propre d'après mes tests...

ps: Je me suis permis d'ajouter le tag résolu
à+

[RdO45]

je me permet de faire un up de ce topic car la première question n'a pas eu de solution et j'ai exactement le même problème. La cellule s'agrandit avec le texte alors que j'aimerai avoir une largeur fixe.
Existe t'il un moment de scinder le texte automatiquement après une certaine longueur directement dans la page html?

[Sub0]

Le texte se mettera sur plusieurs lignes, mais seulement si il ya des espaces contenus dans ton texte. Sinon, regarde peut-être du côté des propriétés de style white-space, overflow ou encore word-wrap... Autrement, il est sûrement possible de le faire avec Javascript.

[EDIT] Essaye avec un TextArea (en readonly), ton texte devrait automatiquement se scinder je crois.

[Kerod]

@Sub : Au lieu de mettre un div tu aurais pu fixer le min-height avec la taille voulu et le faire de même pour le height mais que pour IE. Ca aurait (min-height) pour effet sous FF de garder la taille voulu et si contenu plus grand alors adaptation. N'étant pas reconnu sous IE6 le fait de mettre un height fixe une taille minimale à ta cellule. Mais il faut pour que FF l'interprète aussi jouer avec les hacks.

Je sais pas si c'est assez clair donc je donne un exemple

Code css :

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

1
2
3
4
5
6
td
{
    min-height: 50px;
    height: auto !important;
    height: 50px; /* Que pour IE */
}

@RdO45 : une des solutions est de mettre un <p> qui formatera ton texte. Mais il y a aussi la propriété white-space:nowrap;