Width 100% dans une table

Eléphant du PHP | 51 Messages

23 avr. 2013, 10:17

Bonjour,
Je rencontre un problème concernant la mise en page mon tableau. Je ne comprends pas pourquoi il ne veut pas utiliser 100% de la largeur que le navigateur lui fournit, il occupe seulement environ 50% de cet espace. Je vous transmets mon code :d 'abord le CSS puis le tableau.
<style type="text/css">	
			#recup{overflow:hidden;position:absolute;height:41px;top:70px;z-index:2;}
			#table2{overflow:auto;position:absolute;bottom:152px;top:70px;z-index:1;opacity:1;z-index:1}
		</style type="text/css">
<div id="recup">
		<table align="left" border="1" width="99%" style ="background-color:#EFFFFF;" class="sortable"	>
			
			<thead>
				<tr style="height:38px" align="center">
					<th width="60px" style="border:2px solid black;font-size:0.8em;"><b>Date</b></th>
					<th style="border:2px solid black;font-size:0.8em;"><b>Heure de debut</b></th>
					<th style="border:2px solid black;font-size:0.8em;"><b>Heure de fin</b></th>
					<th style="border:2px solid black;font-size:0.8em;"><b>Entreprise</b></th>
					<th style="border:2px solid black;font-size:0.8em;"><b>Poste Source</b></th>
					<th style="border:2px solid black;font-size:0.8em;"><b>Duree</b></th>
					<?php if (isset($_SESSION['pseudo']) && isset($_SESSION['pass'])){ ?>
					<th colspan="2" style="border:2px solid black;font-size:0.8em;"><b>Modifier / Supprimer</b></th> <?php } ?>
				</tr>
			</thead><?php
				$strSQL = "SELECT * FROM presences_postes";
				$rs = mysql_query($strSQL);
				while($row = mysql_fetch_array($rs)) { ?>
			<tbody>
				<tr border="1" align="center">
					
						<?php $decompo1 = explode("-",$row['Date']); ?>
					<td style="font-size:0.8em;"><?php echo $decompo1[2]."-".$decompo1[1]."-".$decompo1[0]."<br/>";?></td>
						<?php $decompo2 = explode(":",$row['Heure_Debut']); ?>
					<td style="font-size:0.8em;"><?php echo $decompo2[0].":".$decompo2[1]."<br/>";?></td>
						<?php $decompo3 = explode(":",$row['Heure_Fin']); ?>
					<td style="font-size:0.8em;"><?php echo $decompo3[0].":".$decompo3[1]."<br/>";?></td>
					<td style="font-size:0.8em;"><?php echo $row['Entreprise']."<br/>";?></td>
					<td style="font-size:0.8em;"><?php echo $row['Poste_Source']."<br/>";?></td>
						<?php $decompo4 = explode(":",$row['Duree']); ?>
					<td style="font-size:0.8em;"><?php echo $decompo4[0].":".$decompo4[1]."<br/>";?></td>
						<?php if (isset($_SESSION['pseudo']) && isset($_SESSION['pass'])){
					$id_mod = $row['id']; ?> 
					<td><a href="?id_presen=<?php echo $id_mod?>#index">Modifier</a></td>
					<td><a href="delete.php?id_presen=<?php echo $id_mod?>"><img src="img/bouton-modifier.png" width="20" height="20"</a></td>
					<?php } 
					
				}	
			?>
				</tr>
				
			</tbody>
	</table>
Voici ce que ça donne :
Image

Alors que voilà ce que ça donne sur une autre page alors que j'utilise le même procédé
Image

Petit nouveau ! | 8 Messages

23 avr. 2013, 10:47

Bonjour,

Premièrement élimine l'attribut de la fermeture de la balise style de ton code CSS </style type="text/css">

Puis dans un second temps essaie de spécifier sur ta balise div l'attribut style en prenant le soin de spécifier le width:100% et vois ce que ça donne !

Sinon juste pour s'assurer peux-tu nous envoyer le code de l'entête de ta première page ou figure le bloc de connexion et le titre si c'est possible ?!

Eléphant du PHP | 51 Messages

23 avr. 2013, 11:00

Bonjour
Merci de ta réponse, alors j'ai effectivement spécifié le width dans le div de cette manière <div id="recup" style="width:100%;"> et cela fonctionne mais le problème c'est que de cette manière je ne parviens pas à faire un margin-right (j'en ai absolument besoin pour aligner un tableau avec scrollbar et un sans).

Et concernant l'entête elle se situe sur une autre page et ne contient que l'include("connexion.php") contenu dans un tableau de deux colonnes, une pour le module connexion et l'autre pour le titre. Je précise également que je n'ai pas fait de div pour l'entête.

Petit nouveau ! | 8 Messages

23 avr. 2013, 12:33

Essaie plutôt de spécifier dès le début une valeur scroll pour ton paramètre, puis affecte une largeur de 100 pourcent à ta table tout en s'assurant de l'attribution du width de chaque cellule th qui doivent égaler au total la largeur spécifier dans la balise de la table qui est de 100 pourcent, et pense à l'usage du pourcentage au lieu des pixels pour l'hauteur de ton div c'est mieux ainsi, enfin bref c'est toi qui décide :mrgreen: et dis moi ce que ça donne :wink:

Ci-dessous un aperçu du résultat obtenu à l'issue du test :

Image

Eléphant du PHP | 51 Messages

23 avr. 2013, 13:17

Peux-tu me donner le code qui correspond à ce que tu viens de dire s'il te plait ?

Je suis obligé de passer les px pour la hauteur car ça doit correspondre pile poil à la hauteur de la première ligne.

Petit nouveau ! | 8 Messages

23 avr. 2013, 13:38

Si ce que tu fais est un tp pour t'exercer tant mieux 8-) Sinon autrement penses à visualiser cette page sur de multiples navigateurs sous d'innombrables résolutions et vois si ça reflète le même résultat !
<style type="text/css"> 
	  #recup{overflow:scroll;position:absolute;height:151px;top:70px;z-index:2;}
	  #table2{overflow:auto;position:absolute;bottom:152px;top:70px;z-index:1;opacity:1;z-index:1}
</style>

<div id="recup">

                <table align="left" border="1" width="100%" style ="background-color:#EFFFFF;overflow:scroll;" class="sortable"  >
                       
                               <tr align="center">
                                        <th width="10%" style="border:2px solid black;font-size:0.8em;"><b>Date</b></th>
                                        <th width="10%" style="border:2px solid black;font-size:0.8em;"><b>Heure de debut</b></th>
                                        <th width="20%" style="border:2px solid black;font-size:0.8em;"><b>Heure de fin</b></th>
                                        <th width="20%" style="border:2px solid black;font-size:0.8em;"><b>Entreprise</b></th>
                                        <th width="20%" style="border:2px solid black;font-size:0.8em;"><b>Poste Source</b></th>
                                        <th width="20%" style="border:2px solid black;font-size:0.8em;"><b>Duree</b></th>
                                        
                                        <th colspan="2" style="border:2px solid black;font-size:0.8em;"><b>Modifier / Supprimer</b></th> <?php } ?>
                                </tr>
                       
                       <tr border="1" align="center">
                                        
                                               
                                        <td style="font-size:0.8em;">message</td>
                                              
                                        <td style="font-size:0.8em;">message</td>
                                          
                                        <td style="font-size:0.8em;">message</td>
                                        <td style="font-size:0.8em;">message</td>
                                        <td style="font-size:0.8em;">message</td>
                                           
                                        <td style="font-size:0.8em;">qsdf<br/></td>
                                              
                                        <td><a href="">Modifier</a></td>
                                        <td><a href=""><img src="img/bouton-modifier.png" width="20" height="20"</a></td>
                                   
                                </tr>
                                <tr border="1" align="center">
                                        
                                               
                                        <td style="font-size:0.8em;">message</td>
                                              
                                        <td style="font-size:0.8em;">message</td>
                                          
                                        <td style="font-size:0.8em;">message</td>
                                        <td style="font-size:0.8em;">message</td>
                                        <td style="font-size:0.8em;">message</td>
                                           
                                        <td style="font-size:0.8em;">qsdf<br/></td>
                                              
                                        <td><a href="">Modifier</a></td>
                                        <td><a href=""><img src="img/bouton-modifier.png" width="20" height="20"</a></td>
                                   
                                </tr>
                               
                                
                       
        </table>
        </div>