Aligner les champs dans une liste déroulante

Bonjour à tous,

Je recherche depuis pas mal de temps une façon d'aligner plusieurs champs dans une liste déroulante.
Je m'explique : ma liste déroulante contient plusieurs champs par option qui proviennent d'une table Mysql et mon problème est d'avoir une présentation un tant soit peu "lisible".
Un petit exemple vous aidera probablement à mieux comprendre mon charabia :

Liste voulue :

| Nom Court      | Prenom looooong | Adresse looooooooooooooongue |
| Nom looooooong | Prenom court    | Adresse courte               |

Liste obtenue :

|Nom Court|Prenom looooong|Adresse looooooooooooooongue|
|Nom looooooong|Prenom court|Adresse courte| 

Bref, en terme de lisibilité, on a fait mieux...

J'ai donc cherché à inclure les résultats de ma requête SQL dans un tableau mais cela ne fonctionne pas.

Mon code est le suivant :

<select name="ChoixGroupe">
 <?php
	include "connexion.php";

	// On récupère les infos nécessaires de la table groupe
	$reponse = $bdd->query('SELECT Agence, Groupe, IDGroupe, Adresse1 FROM groupe;');
			
	echo '<option>S&eacute;lectionnez votre groupe</option>';
	// On affiche chaque entrée une à une
	while ($donnees = $reponse->fetch()) 	
	{
		$NomGroupe=preg_replace('/_/',' ',$donnees['IDGroupe']);
		echo '<option value='.$donnees['IDGroupe'].'>'.$NomGroupe.' ('.$donnees['Agence'].' - '.$donnees['Groupe'].') ~~~~ '.$donnees['Adresse1'].'</option>';
	}
	$reponse->closeCursor(); // Termine le traitement de la requête
 ?>
</select>

Comme vous pouvez le constater, j'ai mis des séparateurs (~~) pour le rendre un peu lisible mais c'est franchement pas joli joli...

Merci d'avance pour votre aide.
Modifié par fvsch (12 Apr 2011 - 14:38)

Bonjour,

Je me suis permis d'éditer ton message pour le rendre un peu plus lisible. Pour rappel, en HTML les séries d'espaces sont affichées comme un espace unique. Ça vaut aussi pour les messages que tu postes sur ce forum. Pour que chaque espace soit restitué, il faut utiliser white-space:pre en CSS, par exemple en utilisant l'élément PRE. Sur un forum comme celui-ci, ça implique d'utiliser le formatage des blocs de code pour afficher du texte en conservant tous les espaces.

Pour en venir à ton problème: si je comprends bien, tu veux obtenir un affichage qui ressemble à un tableau pour des éléments OPTION? À ma connaissance ce n'est pas possible, il n'y a rien de prévu pour ça en HTML ou en CSS.
La seule astuce à laquelle je pense, c'est d'utiliser un nombre de caractères fixes pour chaque «colonne» de ta valeur, et de compléter avec des espaces insécables (si on réserve 16 caractères pour le nom, et qu'un nom fait 9 caractères, il faudra donc ajouter 7   ou espaces insécables littéraux à la suite… à l'inverse, si le nom fait plus de 16 caractères il faudra couper à 15 et rajouter un …). Pour avoir un rendu homogène, il faudra aussi utiliser une police de caractères à chasse fixe (monospace). J'ai testé rapidement et semble fonctionner, mais je ne suis pas sûr que le rendu soit heureux.

Merci pour ta réponse et désolé pour la mise en forme de mon message.
Ton edit est donc le bienvenu

Je te confirme : je souhaite obtenir un rendu "tableau" dans ma liste déroulante mais, comme tu le dis, c'est pas possible et c'est bien dommage.

Je viens de tester ta solution, effectivement, cela fonctionne très bien, le seul hic c'est le monospace : c'est MOCHE !

Mais au moins, ma liste déroulante est lisible.

Si quelqu'un a une autre idée, je suis preneur.

Une solution possible ensuite c'est de faire une fausse liste déroulante à partir de code HTML, CSS et JavaScript spécifique. Le hic c'est que quand on fait ça il y a plein de trucs à gérer (ex: quid de l'utilisation au clavier, capitale dans une interface qui doit être utilisée au quotidien?), et donc ça demande beaucoup de boulot. Prévoir une demi-journée au bas mot.

Une autre solution, si on sait qu'on aura peu d'entrées à afficher à chaque fois, c'est de faire un tableau HTML avec des <input type="checkbox"> pour sélectionner une ligne, plutôt que de recourir à un <select>.

Enfin, pour ma part un rendu du type "Nom Prénom (Adresse)" ne me choquerait pas, même si on a des variations de longueur importantes d'une ligne à l'autre. Mais tout dépend de ce que cette interface est censée faire au juste.
Modifié par fvsch (12 Apr 2011 - 20:13)