Taille "VRAIEMENT" fixe d'une colonne dans un tableau

Résolu
Teddy_le_gnein Messages postés 36 Date d'inscription vendredi 28 avril 2006 Statut Membre Dernière intervention 31 janvier 2011 - 5 nov. 2009 à 15:25
Teddy_le_gnein Messages postés 36 Date d'inscription vendredi 28 avril 2006 Statut Membre Dernière intervention 31 janvier 2011 - 17 nov. 2009 à 10:25
Bonjour à tous,

Je cherche à faire un tableau avec une taille fixe pour une colonne.
Je connais l'attribut "width" pour la balise <td> mais le problème est quand un mot est très long.
En effet, si je fixe une taille avec "width", cette taille sera réspéctée si j'entre du texte suffisemmant court (ex : "des mots et des espaces") pour ne pas dépasser le width défini.
Mais si j'entre un long mot qui dépasse cette taille, ma cellule va s'agrandire pour que le mot entre dans la cellule (ex : des_mots_sans_espaces").

Existe t'il un moyen pour forcer la taille maximale des colonnes pour que le long mot soit coupé, meme en plein milieu.

Malgré mes recherches je ne trouve rien d'autre que l'utilisation du width que je connais déjà et qui n'est pas adapté dans mon cas!

En vous remerciant!

You can do it...

10 réponses

Tonio_35 Messages postés 567 Date d'inscription mercredi 4 octobre 2006 Statut Membre Dernière intervention 30 août 2011 11
16 nov. 2009 à 16:22
PS : Voici une fonction que j'ai fait il y à quelques années, je crois que ca tournais bien mais elle mérite peut être un ménage...
<?php
/**
 * cut_long_word
 * Entrée
 * $txt :	Texte à découper ;
 * $where :	Longueur maxi d'un mot ;
 * Retour
 * Texte passer dans $txt avec un séparateur invisible ajouté toute les $where lettres non séparées par des éspaces
 */
function cut_long_word($txt, $where=20) {
// Si pas de texte, on retourne false
if (empty($txt)) return false;

$inhtml = false;
$inspecialchar = false;
// On parcours les caractères
for ($c 0, $a 0, $g = 0; $c<strlen($txt); $c++)
{
    // Si le caractère est un < on entre dans du html, il ne faut pas ajouter d'éspaces dans les balises
// Du coup on compte plus et on insère plus d'éspace tant qu'on ne trouve pas un >
if ($txt[$c]=="<")
$inhtml=true;
// Si on est pas dans une balise
if(!$inhtml)
{
// De même, si on est dans un caractère spécial html, il ne faut pas ajouter d'espace
if ($txt[$c]=="&")
{
$tmptxt = $txt[$c].$txt[$c+1].$txt[$c+2].$txt[$c+3].$txt[$c+4].$txt[$c+5];
$isinchaine = strpos("&amp;", $tmptxt);
if(!($isinchaine === false))
{
$inspecialchar = true;
}
$isinchaine = strpos("&quot;", $tmptxt);
if(!($isinchaine === false))
{
$inspecialchar = true;
}
$isinchaine = strpos("&#039;", $tmptxt);
if(!($isinchaine === false))
{
$inspecialchar = true;
}
$isinchaine = strpos("<", $tmptxt);
if(!($isinchaine === false))
{
$inspecialchar = true;
}
$isinchaine = strpos(">", $tmptxt);
if(!($isinchaine === false))
{
$inspecialchar = true;
}
}
// Si nous ne somme ni dans une balise html ni dans un caractère spécial html
if(!$inspecialchar)
{
$d[$c+$g]=$txt[$c];
// Si le caractère courant est un espace, on remet le compteur à 0
// Sinon on incrèment le compteur
if ($txt[$c]!=" ") $a++;
else if ($txt[$c]==" ") $a = 0;

// Si le compteur est plus grand que la limite on ajoute le séparateur
if ($a>$where)
{
$g++;
$separator = "&#8203;";
$a = 0;
// Résolution de pb IE<7 :
// Si IE < 7il ne connait pas &#8203; on lui envois l'équivalant html <wbr />
// Pourquoi pas <wbr /> avec tout les nav dans ce cas :
// 1 - Opéra ne connait pas <wbr />
// 2 - <wbr /> n'est pas un standard W3C

//Création d'une instance de la classe browser
// Ici je fais que récuperer le navigateur du client, vous trouverez plein de codes source pour faire ca...
$browser = new DDSBrowser;  
$name = $browser->Name;
if(strtoupper($browser->Name)=="MSIE" && $browser->Version<7)
{
$separator = "<wbr />";
}
$d[$c+$g]=$separator;
}
}
else
{
// On ajoute le contenu du special char
$d[$c+$g]=$txt[$c];
}
}
else
{
// On ajoute le contenu de la balise html
$d[$c+$g]=$txt[$c];
}
// Si on es dans un caractère spécial et qu'on rencontre un ; c'est qu'on en sort
if ($txt[$c]==";" and $inspecialchar == true)
{
$a=0;
$inspecialchar = false;
}
// Si on es dans une balise html et qu'on rencontre un > c'est qu'on en sort...
if ($txt[$c]==">")
{
$a=0;
$inhtml=false;
}
}
// On retourne la chaine...
return implode("", $d);
}?>


_________________________________
Min iPomme
1
Teddy_le_gnein Messages postés 36 Date d'inscription vendredi 28 avril 2006 Statut Membre Dernière intervention 31 janvier 2011
6 nov. 2009 à 14:03
personne....

You can do it...
0
CSIBern Messages postés 44 Date d'inscription dimanche 3 décembre 2000 Statut Membre Dernière intervention 21 mai 2014
6 nov. 2009 à 14:46
Salut Teddy,

As-tu essayé avec style="max-width:190px;" ?

Cette fonction n'est pas compatible avec tous les navigateurs (notamment IE <6), mais peut-être pourras-t-elle faire des miracles pour toi
0
Teddy_le_gnein Messages postés 36 Date d'inscription vendredi 28 avril 2006 Statut Membre Dernière intervention 31 janvier 2011
6 nov. 2009 à 16:16
Salut CSIBern,
merci de me répondre...

J'ai effectivement essayé avec "style=max-width", mais dans le doute, je viens de réésayer sur une page vièrge avec un petit tableau en example...

Le problème est que je suis contraint à l'utilisation de IE6 pour l'exploitation finale de mon code!!!

Sous IE6, effectivement, ça ne passe pas!
J'ai testé avec un IE8 par curiosité, et ça à pas l'aire mieu! ²
Sous firefox, il limite bien le tableau mais le texte trop long déborde "salement" sur la cellule suivante (mais qu'importe... firefox ne sera pas utiliser pour mon appli)

Bref ça ne semble pas etre la bonne piste pour mon cas!

S'il y a d'autres idées, je suis preneur...




You can do it...
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
TychoBrahe Messages postés 1309 Date d'inscription samedi 31 janvier 2009 Statut Membre Dernière intervention 5 juin 2013 12
6 nov. 2009 à 19:02
Salut,

Pour gérer ce genre de débordement il existe la propriété overflow. Et juste comme ça, le fait que ça doive fonctionner sous ie6 ne t'interdit pas de faire un xhtml valide ni de le séparer du css.
0
Teddy_le_gnein Messages postés 36 Date d'inscription vendredi 28 avril 2006 Statut Membre Dernière intervention 31 janvier 2011
12 nov. 2009 à 13:45
Salut TychoBrahe, et merci de me répondre...

J'ai été absent quelques jours mais me revoilà!
Je ne conaissait pas la propriété overflow, merci.
Je n'ai pas l'habitude de prendre en compte la W3C parceque je fait des pages algorithmiquement fonctionel au niveau php et je concentre l'ecriture de mon code sur les temps de calculs (du moins j'essaye).
Je n'ai pas encore eu jusqu'ici à coder des pages qui se veulent "visuellement bien faites" mais surtout fonctionelles.

D'où mon manque sur le plan du css et du W3C.

J'ai essayé d'utiliser l'overflow, mais si je comprend bien, il faut utiliser une feuille de style qui définis une taille...

La taille de ma cellule est quand à elle définie par le php...
(en % suivant le nombre d'éléments trouvé dans une BDD)

si j'essaye d'utiliser un
qui a pour propriété l'overflow hidden par exemple, mon tableau final n'apparait pas comme je le souhaiterais sans que j'y ajoute les parametres de tailles définis dans la meme feuille de style.

un exemple un peu plus parlant:

1/ pas de débordement, l'overflow est bien utilisé:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">

div
{ 
width : 250px;
  	overflow : hidden; 
}

</style></head>

voici_une_chaine_de_caractere_qui_depasse_les_250_pixels_de_large,

voici une chaine de caractere qui ne depasse pas les 250 pixels de large





2/ si la taille n'est pas définie par le css, la propriété overflow n'est pas utilisé:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">

div
{ 
  	overflow : hidden; 
}

</style></head>

voici_une_chaine_de_caractere_qui_depasse_les_250_pixels_de_large,

voici une chaine de caractere qui ne depasse pas les 250 pixels de large
</html>



Puisque je dois rendre le nombre de colonnes du tableau dynamique (en fonction de la DB), et donc leur taille (en fonction du nombre de colonnes à afficher), je ne peux pas définir cette taille dans la feuille de style.

J'utilise directement les attributs (width) de mes balises html avec des variables calculées en php.

Voyez-vous mon problème?

J'ai essayer de définie une taille dans le CSS de width 100% pour qu'il utilise toute la largeur de ma colonne définie dans le <td> parent, mais ça ne semble pas etre la solution non plus!
Dans ce cas là, la 1ere colonne prend toute la taille néssécaire pour y inscrire ma longue chaine de caractere et l'affichage se coupe bien à l'endroit souhaité, mais pas la cellule qui continue avec un espace blanc inutile à coté...

ex :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">

div
{ 
  	overflow : hidden; 
width : 100%; 
}

</style></head>

voici_une_chaine_de_caractere_qui_depasse_les_250_pixels_de_large,

voici une chaine de caractere qui ne depasse pas les 250 pixels de large
</html>




Vous faut-il plus d'explications? Et sur quel point?
Voyez-vous une solution à ma problématique?

En vous remerciant.


You can do it...
0
cs_jeffe33 Messages postés 2 Date d'inscription dimanche 6 novembre 2005 Statut Membre Dernière intervention 16 novembre 2009
15 nov. 2009 à 21:18
Teddy
j'ai un pb analogue au tien et je n'ai pas encore trouvé la solution
overflow, il a l'air de s'en balancer comme de sa première chemise !!!
désolé de ne pas t'apporter d'aide
si tu as du nouveau je suis aussi preneur...

qui va piano va sano
0
Tonio_35 Messages postés 567 Date d'inscription mercredi 4 octobre 2006 Statut Membre Dernière intervention 30 août 2011 11
16 nov. 2009 à 16:07
Tu coupe les mots trop grands avec le caractère & # 8 2 0 3 ; à l'affichage...

_________________________________
Min iPomme
0
cs_jeffe33 Messages postés 2 Date d'inscription dimanche 6 novembre 2005 Statut Membre Dernière intervention 16 novembre 2009
16 nov. 2009 à 17:40
Tonio j'ai lu ton message
personnellement ce n'est pas tout à fait ce que je cherche
comme je ne vois pas comment bloquer la largeur de la colonne ni avec overflow ni autrement, j'ai pensé plutot à tronquer le texte affiché dans cette colonne lorsque la chaine dépasse x pixels
Pour ça il faut pouvoir déterminer la longueur en pixels de la chaine affichée en fonction de la police.
j'ai trouvé un code qui traite un peu de ce problème
http://files.codes-sources.com/fichier.aspx?id=16193&f=LongueurTexte.html
je trouve très interessant meme si je n'ai pas encore tout bien compris !
mais, le php étant interprété sur le serveur avant le javascript, ce sera délicat de récupérer le nombre de pixels pour tronquer la chaine en php...
affaire à suivre !

je crois que dans mon cas je ne vais pas me casser la tete ...comme je me limite à une police je vais regarder empiriquement le nombre de pixels utilisés et je vais voir à combien de caractères cela correspond pour tronquer au bon endroit

qui va piano va sano
0
Teddy_le_gnein Messages postés 36 Date d'inscription vendredi 28 avril 2006 Statut Membre Dernière intervention 31 janvier 2011
17 nov. 2009 à 10:25
Tonio_35 :
Merci beaucoup... je ne conaissais pas le <wbr /> ou le & # 8 2 0 3...

Et merci de t'etre donné la peine de retrouver ta fonction...
Ceci répond enfin à ma question, et épingle ce topic!

jeffe33 :
Dommage que cela ne t'aide pas trop dans ton problème.
Pour compter la taille prise par le texte, je te conseille d'utiliser l'EM plustot que le PX...
L'arcticle suivant à été une piste lorseque je cherchait aussi à résoudre mon problème en comptant les caractères.
Mais c'est pour le CSS...
ça t'aideras à mieu appréhender ton problème de "comptage" mais je ne sais pas si ça t'aidera à trouver la solution.
Pour moi ça n'a pas été le cas!
http://www.alsacreations.com/article/lire/563-gerer-la-taille-du-texte-avec-les-em.html

Sinon, tu pourrais aussi passer par la génération d'image en php...
Je te l'accorde, c'est assez crado comme méthode, mais en affichant les images que tu génèrerais, ça couperait ton texte au beau milieu et l'image étant de taille fixe, la cellule garderait une taille fixe.

<?php
// Create a 300x100 image
$im = imagecreatetruecolor(300, 100);
$red = imagecolorallocate($im, 0xFF, 0x00, 0x00);
$black = imagecolorallocate($im, 0x00, 0x00, 0x00);

// Make the background red
imagefilledrectangle($im, 0, 0, 299, 99, $red);

// Path to our ttf font file
$font_file = './arial.ttf';

// Draw the text 'PHP Manual' using font size 13
imagefttext($im, 7, 0, 105, 55, $black, $font_file, 'Chaine de caractere qui va etre coupé avant la fin du message à afficher');

// Output image to the browser
header('Content-Type: image/png');

imagepng($im);
imagedestroy($im);
?>


Tu trouveras plus d'infos assez facilement sur la génération d'images en php sur le net.
Je pense que cette solution pourrait etre la bonne dans ton cas.




Merci à vous tous.

You can do it...
0
Rejoignez-nous