28172 sujets

CSS et mise en forme, CSS3

Menu fixe, entête de colonnes fixe, et tableau scrollable

Bonjour à toutes, tous !

Tout est dans le titre : Pour pouvoir afficher des listes assez importantes en retour de requêtes mysql, je souhaite avoir sur ma page :

Un menu fixe dans le "header", les entêtes de colonnes fixes juste en dessous, et le tableau qui scroll juste dessous.

Je n'ai pas de soucis pour la présentation générale. En revanche, si je suis bien parvenu à définir des colonnes fixées en % pour qu'elles aient toutes la largeur souhaitées, ces dimensions fixes ne correspondent pas, entre l'entête et le tableau. Alors qu'elles ont les mêmes valeurs, exactement. Du coup, je sais pas trop si je suis dans la bonne rubrique, ou si c'est un pb de html pur.

Qui plus est, quand on scroll le tableau, on le voit défiler au dessus du header, ce qui ne fait pas très propre ...

Merci d'avance pour vos pistes et votre aide !

Voici le CSS, le HTML viendra dans un scond post :

#header{
	border: 1px solid red;
	position:fixed;
     margin-left: auto;
     margin-right: auto;
	width:98%;
	height:30px;
	z-index:100;
	background-color: #efefef;
}

#entete{
  border: 1px solid green;
	position:fixed;
	top:40px;
    margin-left: auto;
    margin-right: auto;
	width:98%;
	height:20px;
	z-index:60;
	background-color: #efefef;
}

#global{
	border: 1px solid red;
	position:relative;
		margin-left: auto;
 		margin-right: auto;
  width: 98%;
	z-index:0;
	background-color: #efefef;
}
Et voilà le code html purgé au maximum (pardon pour les bouts de php : ce ne sont que des affichages) ;

<body>

<div id="header"> 
	<?php include('menu/Menu_h.php'); ?>
</div>
  
<div id="entete"> 
	<?php
		echo '<table>'."\n";
			echo '<tr>';
				echo '<th id="thverysmall">I</th>';
				echo '<th id="thmedium">D</th>';
				echo '<th id="thverysmall">T</th>';
				echo '<th id="thmedium">C</th>';
				echo '<th id="thmedium">T</th>';
				echo '<th id="thmedium">S</th>';
				echo '<th id="thbig">O</th>';
				echo '</tr>'."\n";
		echo '</table>'."\n";
	?>
</div>

<div id="global"> 
	<?php
		echo '<table>'."\n";
			echo '<tr>';
				echo '<td id="tdverysmall_p"><a href='.$url.'>' .$l_appels1['ap_id']. '</a></td>';
				echo '<td id="tdmedium_p">'.$l_appels1['ap_t'].' </td>';
				echo '<td id="tdverysmall_p">'.$l_appels1['ap_t'].'</td>';
				echo '<td id="tdmedium_p">'.$l_appels1['ap_c'].'</td>';
				echo '<td id="tdmedium_p">'.$l_appels1['ap_t'].'</td>';
				echo '<td id="tdmedium_p">'.$l_appels1['ap_s'].'</td>';
				echo '<td id="tdbig_p">'.$l_appels1['ap_o'].'</td>';
			echo '</tr>'."\n"; 
		echo '</table>'."\n";
  ?>
</div>

</body>

Modifié par pols77 (04 Aug 2010 - 06:06)
Sujet clos
Aller à