Taille "VRAIEMENT" fixe d'une colonne dans un tableau [Résolu]

Teddy_le_gnein 36 Messages postés vendredi 28 avril 2006Date d'inscription 31 janvier 2011 Dernière intervention - 5 nov. 2009 à 15:25 - Dernière réponse : Teddy_le_gnein 36 Messages postés vendredi 28 avril 2006Date d'inscription 31 janvier 2011 Dernière intervention
- 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...
Afficher la suite 

Votre réponse

10 réponses

Meilleure réponse
Tonio_35 567 Messages postés mercredi 4 octobre 2006Date d'inscription 30 août 2011 Dernière intervention - 16 nov. 2009 à 16:22
3
Merci
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

Merci Tonio_35 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 88 internautes ce mois-ci

Commenter la réponse de Tonio_35
Teddy_le_gnein 36 Messages postés vendredi 28 avril 2006Date d'inscription 31 janvier 2011 Dernière intervention - 6 nov. 2009 à 14:03
0
Merci
personne....

You can do it...
Commenter la réponse de Teddy_le_gnein
CSIBern 45 Messages postés dimanche 3 décembre 2000Date d'inscription 21 mai 2014 Dernière intervention - 6 nov. 2009 à 14:46
0
Merci
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
Commenter la réponse de CSIBern
Teddy_le_gnein 36 Messages postés vendredi 28 avril 2006Date d'inscription 31 janvier 2011 Dernière intervention - 6 nov. 2009 à 16:16
0
Merci
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...
Commenter la réponse de Teddy_le_gnein
TychoBrahe 1310 Messages postés samedi 31 janvier 2009Date d'inscription 5 juin 2013 Dernière intervention - 6 nov. 2009 à 19:02
0
Merci
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.
Commenter la réponse de TychoBrahe
Teddy_le_gnein 36 Messages postés vendredi 28 avril 2006Date d'inscription 31 janvier 2011 Dernière intervention - 12 nov. 2009 à 13:45
0
Merci
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...
Commenter la réponse de Teddy_le_gnein
cs_jeffe33 2 Messages postés dimanche 6 novembre 2005Date d'inscription 16 novembre 2009 Dernière intervention - 15 nov. 2009 à 21:18
0
Merci
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
Commenter la réponse de cs_jeffe33
Tonio_35 567 Messages postés mercredi 4 octobre 2006Date d'inscription 30 août 2011 Dernière intervention - 16 nov. 2009 à 16:07
0
Merci
Tu coupe les mots trop grands avec le caractère & # 8 2 0 3 ; à l'affichage...

_________________________________
Min iPomme
Commenter la réponse de Tonio_35
cs_jeffe33 2 Messages postés dimanche 6 novembre 2005Date d'inscription 16 novembre 2009 Dernière intervention - 16 nov. 2009 à 17:40
0
Merci
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
Commenter la réponse de cs_jeffe33
Teddy_le_gnein 36 Messages postés vendredi 28 avril 2006Date d'inscription 31 janvier 2011 Dernière intervention - 17 nov. 2009 à 10:25
0
Merci
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...
Commenter la réponse de Teddy_le_gnein

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.