28173 sujets

CSS et mise en forme, CSS3

[Résolu] Garder les entetes de tableau avec un CSS overflow

Bonjour a tous,

voici ma demande :

j'ai une div qui a un css overflow scroll afin d'avoir un tableau de résultat dans ma page.

<div style="height:600px;overflow:scroll;">
<table>
<tr>
<td>CHAMPS 1</td><td>CHAMPS 2</td><td>CHAMPS 3</td>
</tr>
<tr>
<td>RES 1</td><td>RES 2</td><td>RES 3</td>
</tr>
</table>
</div>


j'aimerais garder les entetes de la table, la premiere en ligne donc,
et scroller uniquement les résultats car j'ai qqes centaines de résultats dans mes requetes.

par contre, je ne peux pas mettre les entetes dns un autres tableaux comme ceci :
<table>
<tr>
<td>CHAMPS 1</td><td>CHAMPS 2</td><td>CHAMPS 3</td>
</tr>
</table>
<div style="height:600px;overflow:scroll;">
<table>
<tr>
<td>RES 1</td><td>RES 2</td><td>RES 3</td>
</tr>
</table>
</div>

parce que les entetes ne seront pas alignés avec les cellules des résultats.

Comment faire ? Smiley decu
Modifié par Joe Le Mort (07 Feb 2007 - 10:03)
Hello,

je crois avoir trouvé une piste interessante pour toi, et je viens de tester,ça tourne Smiley lol

l'idée c'est de positionner l'entete en absolute juste au dessus de ton table (qui lui n'est pas en position:absolute)

<div id="tab">
	<table>
		<tr id="entete"><th>Titre</th><th>Titre</th></tr>
		<tr><td>Test Test</td><td>Test..Test</td></tr>
		<tr><td>Test Test</td><td>Test..Test</td></tr>
		<tr><td>Test Test</td><td>Test..Test</td></tr>
		<tr><td>Test Test</td><td>Test..Test</td></tr>		
		<tr><td>Test Test</td><td>Test..Test</td></tr>
		<tr><td>Test Test</td><td>Test..Test</td></tr>
		<tr><td>Test Test</td><td>Test..Test</td></tr>
		<tr><td>Test Test</td><td>Test..Test</td></tr>
	</table>
</div>


donc, ton div#tab, tu le met en overflow auto (ou scroll),
ton tr#entete en position:absolute.

Je pense qu'il faudra preciser explicitement la largeur de #entete et du table (à la meme taille de preference ^^).

j'ai reussi à avoir un resultat potable... a ton tour Smiley lol
Modifié par m0ul-fr1t (05 Feb 2007 - 13:14)
Une piste également : un tableau peut être divisé en deux éléments thead et tbody :
<table>
	<thead>
	...
	</thead>
	<tbody>
	...
	</tbody>
</table>

C'est peut-être exploitable pour ce que tu veux faire.

Sinon, on peut également penser au positionnement fixe (position: fixed).
Joe Le Mort a écrit :
le probleme est que la ligne d'entete est au dessus de la 1ere ligne de résultat :

http://img144.imageshack.us/img144/8730/barrexp6.jpg

Dans ce cas, ménager un espace vide qui se glissera sous le bloc positionné en absolu ou en fixe. Avec un padding-top sur la première ligne de contenu du tableau, ou un margin-top... suivant ce qui marchera.

Joe Le Mort a écrit :
dois je faire comme ca ?
<table>
	<thead>
              <tr><td></td>...</tr>
	</thead>
	<tbody>
              <tr><td></td>...</tr>
             <tr><td></td>...</tr>
	</tbody>
</table>


Plutôt ainsi :
<table>
	<thead>
              <tr><th></th>...</tr>
	</thead>
	<tbody>
              <tr><td></td>...</tr>
             <tr><td></td>...</tr>
	</tbody>
</table>

Des th pour les titres des colonnes, si on veut faire les choses bien.

Ensuite, il n'est pas dit qu'il soit possible ou facile de mettre en forme les table, thead et tbody pour avoir l'effet voulu...
Merci de ta réponse.

en effet cela marche bien, mais le soucis comme tu l'as dit et d'avoir les memes dimensions des colonnes, ce que je ne peux obtenir.
Or c'est vraiment ce que je recherche.

Si quelqu'un qui a réussit peut me dire sa façon de faire.

J'aimerais ne pas écrire les largeurs des colonnes, pour qu'elles s'adaptent aux largeurs d'écran.
Salut.

Voilà ce que je te propose :

CSS

table {
   width:100%;
   border:1px solid #000000;     /* Juste histoire de voir le tableau */
}
thead {
   height: 50px;     /* Hauteur de tes entêtes */
}
tbody {
   height: 150px;     /* Hauteur du reste des données */
   overflow-y: auto;     /* Ton scroll vertical */
   overflow-x:hidden; /* Scroll horizontal caché */
}
td {
   padding-right:10px     /* permet à tes infos de ne pas être caché par le scroll vertical, étant donné que l'horizontal est masqué  */
}

HTML

<table>
 <thead>
   <tr>
     <th>Entete1</th>
     <th>Entete2</th>
     <th>Entete3</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <td>Cellule1</td>
     <td>Cellule2 Cellule2</td>
     <td>Cellule3</td>
   </tr>
   <tr>
     <td>Cellule4</td>
     <td>Cellule5</td>
     <td>Cellule6</td>
   </tr>
   <tr>
     <td>Cellule7</td>
     <td>Cellule8</td>
     <td>Cellule9</td>
   </tr>
   <tr>
     <td>Cellule10</td>
     <td>Cellule11</td>
     <td>Cellule12 Cellule12 Cellule12</td>
   </tr>
   <tr>
     <td>Cellule13 Cellule13 Cellule13</td>
     <td>Cellule14 Cellule14 Cellule14</td>
     <td>Cellule15 Cellule15 Cellule15</td>
   </tr>
      <tr>
     <td>Cellule16</td>
     <td>Cellule17</td>
     <td>Cellule18</td>
   </tr>
   <tr>
     <td>Cellule19</td>
     <td>Cellule20</td>
     <td>bla bla bla bla bla bla bla bla  bla bla bla bla</td>
   </tr>
 </tbody>
</table>

Modifié par Strix (06 Feb 2007 - 16:02)
Salut a tous je met permet de ressortir ce topic car je doit effectuer a peu près la même chose que joe le mort. Seulement 99% des mes utilisateurs utilisent IE 7.0 (oui,oui, je sais...). Et autant la solution de Strix est parfaite pour FF autant sous IE à l'heure actuelle elle ne marche absolument pas pour moi.
Quelqu'un aurait une idée pour faire marcher la chose sous IE 7 ? Smiley bawling
Pour l'instant je suppose que mes problèmes viennent principalement du fait que IE7 refuse dans beaucoup de gars des hauteurs et largeur relative pour mes éléments.
Merci d'avance
Modifié par Diwatt (21 Feb 2007 - 13:30)
Sujet clos
Aller à