Générer une liste qui s'affiche comme un tableau

Bonjour à tous,

Je vais essayer d'être le plus clair possible pour bien vous expliquer mon problème.

J'ai une <TABLE> générée dynamiquement qui regroupent des données extraites d'une base de données.

Certaines cellules de cette <TABLE> sont des listes déroulantes contenant des valeurs extraites d'un champ d'une table de ma base de données (voir image ci-dessous : 'Année', 'Type de vins' et 'Stock' viennent respectivement des champs 'ANNEE_PROD', 'CAT_PROD' et 'STOCK_PROD' de ma table 'PRODUITS').

Par contre pour certaines cellules (image : deuxième ligne) la liste déroulante contient des valeurs extraites de plusieurs champs d'une même table. Dans cette exemple les valeurs viennent tous de 'ID_CARAC_VIN', 'APPELLATION', 'TYPE_CARAC_VIN', 'REGION_VIN' et 'PAYS_VIN' de la table 'CARAC_VINS' mais sont regroupées dans la même liste déroulante.

Comme vous pouvez le voir, l'affichage de la grand liste est assez disgracieux puisque que les données ne s'alignent pas sur les titres des champs.

Pour y remédier j'ai essayer plusieurs techniques:
1°) Mettre directement la ligne de la de la <TABLE> dans le <OPTION> (cela affiche correctement la ligne mais ça supprime la liste déroulante)
2°) Mettre des <DIV> dans le <OPTION> pour séparer les données (sans aucun résultat même avec des width pour chaque <DIV>)
3°) Mettre des &nbsp; entres chaque valeur (mais comme la longueur de chaque données est différentes cela ne cadre pas correctement avec les titres des champs de la <TABLE>)

Bref je suis à cours d'idée..

Si quelqu'un a une solution à me proposer, ça m'arrangerait.

Salut,
Je n'ai pas de solution à ton problème.
Néanmoins, est ce que ce que tu cherches à faire correspond réellement à un tableau ?
D'autre part, si l'utilisateur peut choisir indépendamment chacun des champ à la ligne du haut, pourquoi sont-ils tous regroupés dans la ligne du bas ? Ne pourraient-ils pas, eux aussi, être indépendants ?

[...]si l'utilisateur peut choisir indépendamment chacun des champ à la ligne du haut, pourquoi sont-ils tous regroupés dans la ligne du bas ? Ne pourraient-ils pas, eux aussi, être indépendants ?[...]

Et bien justement non!

En fait les données de la première ligne ne sont propres qu'au produit en question, en modifier un paramètre ne change rien pour les autres produits. (exemple : vous pouvez changez l'année ou le fait qu'il soit en stock ou pas, ça n'interfère pas avec les autres).

Les données de la seconde ligne par contre sont communs à plusieurs produits. En changer un seul modifierait les données de dizaines de produits et en plus serait inexacte. En effet celles ci ne peuvent être modifier, on peut au pire en rajouter, ou carrément changer l'ensemble. (exemple : un vin de Saumur sera toujours produit en Loire et il sera toujours produit en France).

Enfin bref, voilà la raison de la chose.

Bonjour à tous,

Je suis désolé de revenir à la charge avec cette question mais je cherche toujours une solution pour afficher les résultats d'un <select> en respectant à peu près la longueur des champs titres de la table (voir image dans le premier message).

J'ai essayé divers solutions mais rien ne fonctionne.

Voici la partie de mon code PHP de ma dernière tentative:

echo("<table class=\"tabGestVins\">\n");
echo("<thead>\n");
echo("<tr>\n");
echo("<td colspan=\"5\">&nbsp;</td>\n");
echo("</tr>\n");
echo("<tr>\n");
echo("<td colspan=\"5\"><span class=\"titreListeLeft\">Donn&eacute;es sur l'appellation</span></td>\n");
echo("</tr>\n");
echo("<tr>\n");
echo("<td colspan=\"5\">&nbsp;</td>\n");
echo("</tr>\n");
echo("<tr align=center>\n");
echo("<td class=\"tabAppelTitreTD1\">N&deg;</td>\n");
echo("<td class=\"tabAppelTitreTD2\">Appellation</td>\n");
echo("<td class=\"tabAppelTitreTD3\">Type</td>\n");
echo("<td class=\"tabAppelTitreTD4\">R&eacute;gion</td>\n");
echo("<td class=\"tabAppelTitreTD5\">Pays</td>\n");
echo("</tr>\n");
echo("</thead>\n");

//création de la requête 
$GestAppel = "SELECT carac_vins.ID_CARAC_VIN, APPELLATION, TYPE_CARAC_VIN, REGION_CARAC_VIN, PAYS_VIN
FROM carac_vins
INNER JOIN produits
ON produits.ID_CARAC_VIN = carac_vins.ID_CARAC_VIN 
WHERE produits.ID_PROD = '$_POST[IdentVins]'";		
//execution de la requête (ou affichage de l'erreur)
$ga=mysql_query($GestAppel) or die(mysql_error()); 
// On fait une boucle pour lister les valeurs selectionnees :
while($valGa=mysql_Fetch_array($ga))
{
echo("<tr>\n");
//liste deroulante de l'ensemble des valeurs des appellations
echo("<td class=\"tabGestNScenter\" colspan=\"5\">\n<select class=\"longSelect\" title=\"liste des appellations\" name=\"totalAppel\">\n");
echo("<option selected value=\"".htmlentities($valGa['ID_CARAC_VIN'])."\"><div class=\"appTd1\">".htmlentities($valGa['ID_CARAC_VIN'])."</div><div class=\"appTd2\">".htmlentities($valGa['APPELLATION'])."</div><div class=\"appTd3\">".htmlentities($valGa['TYPE_CARAC_VIN'])."</div><div class=\"appTd4\">".htmlentities($valGa['REGION_CARAC_VIN'])."</div><div class=\"appTd5\">".htmlentities($valGa['PAYS_VIN'])."</div></option>\n");

//creation de la requete pour la liste deroulante
$deroulAppel = "SELECT carac_vins.ID_CARAC_VIN, APPELLATION, TYPE_CARAC_VIN, REGION_CARAC_VIN, PAYS_VIN 
FROM carac_vins ORDER BY ID_CARAC_VIN ASC";
//execution de la requête (ou affichage de l'erreur)
$dA=mysql_query($deroulAppel) or die(mysql_error());  //execution de la requete (ou affiche l'erreur)
// On fait une boucle pour lister les valeurs selectionnees :
    while($row=mysql_Fetch_array($dA))  //boucle tant que des données sont extraites
    {
        echo("<option class=\"SelectAlignGauche\" value=\"".$row['ID_CARAC_VIN']."\"><div class=\"appTd1\">".htmlentities($row['ID_CARAC_VIN'])."</div><div class=\"appTd2\">".htmlentities($row['APPELLATION'])."</div><div class=\"appTd3\">".htmlentities($row['TYPE_CARAC_VIN'])."</div><div class=\"appTd4\">".htmlentities($row['REGION_CARAC_VIN'])."</div><div class=\"appTd5\">".htmlentities($row['PAYS_VIN'])."</div></option>\n");
    }
echo("</select></td>\n");
}
echo("<tr>\n");
echo("<td colspan=\"5\">&nbsp;</td>\n");
echo("</tr>\n");
echo("</table>\n");

Et la partie du CSS:

.tabGestVins { width:960px; border-collapse:collapse; vertical-align:middle; }
.SelectAlignGauche { text-align:left; padding-left:5px; padding-right:5px; }
.titreListeLeft { font-weight: bolder; font-size:18px; color:#940F17; text-align:left; text-indent:0; margin-left:0; }
.appTd1 { width:60px; display:block; float:left; }
.appTd2 { width:350px; display:block; float:left; }
.appTd3 { width:100px; display:block; float:left; }
.appTd4 { width:215px; display:block; float:left; }
.appTd5 { width:215px; display:block; float:left; }
.tabAppelTitreTD1 { width:60px; height:30px; text-align:center; vertical-align:middle; font-size:14px; border:1px solid #000; border-collapse:collapse; background-color:#CCC; font-weight:bolder; }
.tabAppelTitreTD2 { width:350px; height:30px; text-align:center; vertical-align:middle; font-size:14px; border:1px solid #000; border-collapse:collapse; background-color:#CCC; font-weight:bolder; }
.tabAppelTitreTD3 { width:100px; height:30px; text-align:center; vertical-align:middle; font-size:14px; border:1px solid #000; border-collapse:collapse; background-color:#CCC; font-weight:bolder; }
.tabAppelTitreTD4 { width:215px; height:30px; text-align:center; vertical-align:middle; font-size:14px; border:1px solid #000; border-collapse:collapse; background-color:#CCC; font-weight:bolder; }
.tabAppelTitreTD5 { width:215px; height:30px; text-align:center; vertical-align:middle; font-size:14px; border:1px solid #000; border-collapse:collapse; background-color:#CCC; font-weight:bolder; }
.tabGestNScenter { text-align:center; font-size:14px; height:25px; border:1px solid #000; border-collapse:collapse; background-color:#FFF; }

Cela fait trop longtemps que je suis dessus, peut-être existe t'il une autre façon de faire (sans <select> ou penser directement la conception global de ma table) mais je n'ai plus les idées claires, je manque de recul maintenant.

Je pense qu'un regard neuf pourrait m'aider à trouver une solution (enfin j'espère).

J'ai besoin de votre aide!