[resolu] Fixer 1ere ligne d'un tableau

Bonjour -

J'ai besoin d'afficher un tableau à partir d'une base de données et je génnère le tableau via un script php qui fonctionne sans problème, et une feuille CSS.
Tout fonctionne à part que je n'arrive pas à 'figer' la 1ere ligne (intitulés de ccolonnes) : lors du scrolling elle disparait alors que je souhaiterais que seules les rangées de données soient 'scrollées'.
Ci dessous le code php de création du tableau, et code HTML de la page qui appelle le script

Merci de vos conseils

Olivier

Script PHP

echo '<table>'."\n";
    echo '<style type="text/css" media="all">@import "mediagroove.css";</style>';
    echo '<th>Categorie</th>';
    echo '<th>Nom</th>';
    echo '<th>Prix</th>';
    echo "\n";

    // lecture et affichage des donnees.    
    while($tab = mysql_fetch_array($valeur)) {
        echo '<tr>';
       echo '<td>';
       echo $tab['categorie'];
       echo '</td>';
       echo '<td>';
       echo $tab['nom'];
       echo '</td>';
      echo '<td>';
      echo $tab['prix'];
      echo '</td>';
       echo '</tr>'."\n";

    }
    echo '</table>'."\n";

Code HTML appelant

<div id="Corps" style="position: absolute; width: 1052px; height: 714px; z-index: 4; left: 279px; top: 156px">
	<div id="calque1" style="position: absolute; width: 111px; height: 709px; z-index: 1; left: 0px; top: 0px">
	</div>
	<div id="calque2" style="position: absolute; width: 702px; height: 709px; z-index: 2; left: 120px; top: 3px; overflow: auto;">
<!--			<link href="mediagroove.css" rel="stylesheet" media="all" type="text/css"> -->
			<?php include('tableau_prix.php')?>
	</div>	</div>

Merci d'avance si vous détectez une erruer !!
Modifié par odel (10 Jan 2010 - 12:28)

Bonjour,

«Figer» un élément à son emplacement de départ, cela se gère en CSS en utilisant le positionnement fixe (position:fixed). À noter: ce n'est pas compatible IE6 (mais tant pis, hein?), et ça n'est pas toujours évident à manier.

Par ailleurs, je ne crois pas qu'on puisse appliquer un position:fixed à une ligne de tableau, et ce de manière compatible dans tous les navigateurs.
Donc à priori c'est juste pas possible. Ceci dit, il me semble avoir déjà vu quelque chose de compatible dans un défi CSS sur SitePoint, donc je vais éviter d'être catégorique.

Quoi qu'il en soit, il doit être possible de bricoler des choses. Si les colonnes de ton tableau ont des largeurs fixes (pour un tableau en table-layout:fixed), tu peux placer ton tableau dans un DIV de hauteur fixe en overflow:auto, et placer par dessus l'en-tête de ce tableau un «faux en-tête» positionné en absolu. Reste à voir quelle serait la nature exacte de ce «faux en-tête»: une image (capture d'écran de l'en-tête normal), un tableau à une seule ligne?
Modifié par Florent V. (09 Jan 2010 - 21:31)

Merci Florent - j'avais essayé le position:fixed dans les proprietes CSS de ma balise thead mais sans résultat. Je pense que je vais créer deux tableaux : 1 fixe avec une seule ligne (entête), et un juste dessous avec les overflow/scroll pour les données. En partageant la même feuille de style le résultat devrait être conforme à ce que je cherche, du moins je l'espère.
Je viendrai donner le résultat dès que possible et (je croise les doigts) passer en résolu ...
Olivier

Voila c'est fait. Mon seul problème est que bien qu'utilisant deux tableaux mis en forme avec la même feuille CSS dans des balises de même largeur, les largeurs colonnes de mon tableau 'entete' étaient différentes de celles de mon tableau 'données'. J'ai résolu en mettant width à 33% pour les deux tableaux. Ca me contraint à avoir les 3 colonnes de même largeur.
Y a t'il un moyen de spécifier la largeur pour chaque colonne ? Dois je créer une balise pour chaque colonne ?
Merci
Olivier

Une autre solution à essayer : créer un seul tableau, mais structuré avec les éléments thead et tbody, comme suit :

<table>
  <caption>Légende du tableau</caption>
  <thead>
    <tr>
      <th scope="col">Catégorie</th>
      <th scope="col">Nom</th>
      <th scope="col">Prix</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

et appliquer à l'élément tbody une hauteur fixe et un overflow: auto.

Pour spécifier une largeur à chaque colonne de tableau, tu peux soit fixer cette largeur directement au niveau de l'élément th soit utiliser l'élément col auquel tu ajoutes une classe permettant de fixer la largeur en question.

<table>
  <caption>Légende du tableau</caption>
  <col span="3" class="colonnes" />
  <thead>
    <tr>
      <th scope="col">Catégorie</th>
      <th scope="col">Nom</th>
      <th scope="col">Prix</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

.colonnes {
  width: 10%;
}

Modifié par Victor BRITO (10 Jan 2010 - 11:45)

Merci -
J'avais essayé thead et tbody mais sans succes pour la largeur.
Je ne comprends pas bien l'usage de l'élément col (pour différencier chaque largeur) mais comme je n'ai que 3 colonnes j'ai directement spécifié la largeur de chaque colonne dans mon echo (le tableau est genere en php) pour l'entete et les données ==> ca marche parfaitement
Merci encore
Je passe en résolu
Olivier

odel a écrit :
Voila c'est fait.

Dans l'idéal le tableau qui contient les données devrait aussi avoir une ligne d'en-tête (avec des <th scope="col">...</th> qui vont bien, pas des TD, bien sûr). Cela rendra le tableau compréhensible même si les styles sont désactivés, via un lecteur d'écran, etc. Et tant pis pour la duplication, qui est un moindre mal.

Note: si la solution de Victor fonctionne, c'est sans doute la meilleure option. À tester.

odel a écrit :
Y a t'il un moyen de spécifier la largeur pour chaque colonne ? Dois je créer une balise pour chaque colonne ?

Regarde du côté de la propriété CSS table-layout. Par défaut les tableaux utilisent un algorithme de calcul automatique pour la largeur des colonnes, et les instructions de largeur que tu donnes sont prises en compte par l'algorithme mais pas respectées à la lettre. Heureusement, tu peux dire en CSS que tu préfères spécifier directement toutes les largeurs, avec table-layout:fixed.
Modifié par Florent V. (10 Jan 2010 - 16:31)