Comment gérez vous vos tableaux HTML ?

[php_addict]

Bonjour

comment gérez-vous vos tableaux HTML, et notamment les dimensions des colonnes?

utilisez vous table-layout:auto; ou table-layout:fixed;

j’imagine que si on utilise ceci ci-dessous il faut à tout les coups mettre un width="XXX" dans chaque colonne de chaque tableau, non ?

 .rounded-table

{

	text-align: left;

	border-collapse: collapse;

	margin: 10px;

	width:95%;

	table-layout:fixed;

	overflow:hidden;

	word-wrap:break-word;

}

[Sephi-Chan]

Tu peux définir une largeur à tes th.

[php_addict]

oui mais ce que je veut dire: laissez vous le navigateur se débrouiller avec les <table> ou forcez vous l'affichage à chaque fois ?

[Sephi-Chan]

J'ai dû mal à comprendre… Qu'est-ce que tu veux forcer ? Et pourquoi voudrais-tu faire ça ?

[php_addict]

et bien pour eviter ce genre de debordement: http://www.456bereastreet.com/lab/table-...ple-1.html

mais avec un table layout fixed il faut dimensionner ces colonnes sinon c'est vraiment l'anarchie
http://www.456bereastreet.com/lab/table-...ple-3.html

Comme le contenu de mes tableaux est dynamique je n'ai que peu de controle sur le contenu texte des cellules, et parfois cela occasionne des affichages aberrants

est ce plus clair ?

[madmax52]

moi je défini toujours une hauteur et une largueur du tableau comme ça pas de soucis et pas de surprises.

un exemple

Code :

<table align="center" border="0" cellpadding="0" style="height: 200px; width: 600px;">
<tbody>
<tr>
<td colspan="2" style="border: 0px solid #000000; text-align: center;">
<p><strong><span style="font-size: medium;"><a href="http://lekoi.e-monsite.com/rubrique,quizz-carpe-koi,312997.html" title="Quizz">Jeu Quizz</a></span></strong></p>
</td>
<td colspan="2" style="border: 0px solid #000000; text-align: center;">
<p><strong><span style="font-size: medium;"><a href="http://lekoi.e-monsite.com/rubrique,annuaire-thematique-gratuit,369308.html" title="Annuaire th&eacute;matique gratuit">Annuaire th&eacute;matique</a></span></strong></p>
</td>
<td colspan="2" style="border: 0px solid #000000; text-align: center;">
<p><strong><span style="font-size: medium;"><a href="http://lekoi.e-monsite.com/album.html" title="Albums photos">Albums photos</a></span></strong></p>
</td>
</tr>
<tr>
<td colspan="3" style="border: 0px solid #000000; text-align: center;">
<p><strong><span style="font-size: medium;"><a href="http://lekoi.e-monsite.com/rubrique,forum,313348.html" title="Forum">Le forum</a></span></strong></p>
</td>
<td colspan="3" style="border: 0px solid #000000; text-align: center;">
<p><strong><span style="font-size: medium;"><a href="http://lekoi.e-monsite.com/rubrique,page-d-entre-de-camera,370202.html" title="Web-cam 24h/24h">Webcam 24h/24h</a></span></strong></p>
</td>
</tr>
<tr>
<td colspan="2" style="border: 0px solid #000000; text-align: center;">
<p><strong><span style="font-size: medium;"><a href="http://lekoi.e-monsite.com/rubrique,calendrier-2011-gratuit,332299.html" title="Calendrier 2011 gratuit">Calendrier 2011</a></span></strong></p>
</td>
<td colspan="2" style="border: 0px solid #000000; text-align: center;">
<p><strong><span style="font-size: medium;"><a href="http://lekoi.e-monsite.com/rubrique,chaine-lekoi,353221.html" title="Cha&iuml;ne lekoi">Cha&icirc;ne leko&iuml;</a></span></strong></p>
</td>
<td colspan="2" style="border: 0px solid #000000; text-align: center;">
<p><strong><span style="font-size: medium;"><a href="http://lekoi.e-monsite.com/rubrique,dossiers-complets,377278.html" title="Dossiers complets">Les dossiers<br /></a></span></strong></p>
</td>
</tr>
<tr>
<td align="center" colspan="6" style="border: 0px solid #000000; text-align: center;" valign="middle">
<p><strong><span style="font-size: medium;">Magazine Lekoi Nishikigoi <a href="http://lekoi.e-monsite.com/rubrique,magazine-lekoi-nishikigoi-n-1,371133.html" title="Magazine lekoi n&deg;1">N&deg;1</a> <a href="http://lekoi.e-monsite.com/rubrique,magazine-lekoi-nishikigoi-n-2,371237.html" title="Magazine lekoi n&deg;2"></a><br /></span></strong></p>
</td>
</tr>
</tbody>
</table>

Le code n'est pas propre car c'est l'éditeur qui me génère des truc automatique parfois.

[Maz]

madmax: ce que tu dis est en partie juste, mais si tu met comme dans un l'exemple un_lien_super_long. Le lien va agrandir ton tableau, quoi que tu lui dises.

Je n'ai jamais été confronté à un soucis du genre jusque là, mais d'après ce que j'ai lu ces 10dernières minutes, il n'existes pas encore de solution cross-browser prédéfinie. Peut-être passer par javascript pour ajouter des <br />? Mais ça fait beuark à mon goût...

[niahoo]

comment se fait-il que la propriété CSS word-wrap ne fonctionne pas ?

Si on place le contenu de la cellule dans un div et qu'on lui donne une max-width ?

[Maz]

Word-wrap n'est pas compatible avec tout les navigateurs. Max-width, ou simplement width fonctionnes dans la cellule. Ce que je voulais dire lors de mon dernier post c'est qu'on ne peut pas laisser le nav géré le tableau. Soit on défini des largeur aux cellules(ce que je n'aimes pas vraiment). Soit on passes par des fonctions persos.

[php_addict]

je nage completement...comment prevoir la taille en pixel d'un texte? c'est impossible?

Je viens de tester tout plein de trucs et aucun ne me va...

imaginons un truc simple, un tableau avec le nom des joueurs (limité à 15 caractères)

voici 2 pseudos:

iiiiiiiiiiiiiii
OOOOOOOOOOOOOOO

il est impossible de définir un width="??"

alors je ne vous parle même pas des tableaux avec du texte un peu plus long, ou qui varie du simple au double en longueur...

il va falloir que je trouve une solution et modifier au moins 150 tableaux....les boules...