Connexion | Inscription | FAQ
Anonymous

Largeur tableau généré en php

+ Publier une réponse

2 messages Page 1 sur 1


Largeur tableau généré en php

par stevenP » Mer Mars 14, 2012 1:56 pm

Bonjour j'ai un soucis avec mon tableau.

J'ai un tableau que je génère en php depuis un BDD.

J'aimerai que mon tableau tienne sur la page actuelle en largeur et ne dépasse pas à droite comme ici :

Image

Voici ma source php :

Code: Tout sélectionner
<?php session_start(); ?>

<?php

// Au démarrage, aucune sélection : on extrait toutes les données individuellement pour chaque liste

mysql_connect('localhost', 'root', '');
mysql_select_db('xls_db');

// raison sociale
$sql = 'SELECT DISTINCT client FROM histo ORDER BY client';
$qry = mysql_query($sql);
while($row = mysql_fetch_assoc($qry)) {
   $dataClient[] = $row['client'];
}

// ROS
$sql = 'SELECT DISTINCT ros FROM histo ORDER BY ros';
$qry = mysql_query($sql);
while($row = mysql_fetch_assoc($qry)) {
   $dataRos[] = $row['ros'];
}

// code postal
$sql = 'SELECT DISTINCT codepostal FROM histo ORDER BY codepostal';
$qry = mysql_query($sql);
while($row = mysql_fetch_assoc($qry)) {
   $dataCp[] = $row['codepostal'];
}

// produit
$sql = 'SELECT DISTINCT id_produit FROM histo ORDER BY id_produit';
$qry = mysql_query($sql);
while($row = mysql_fetch_assoc($qry)) {
   $dataProduit[] = $row['id_produit'];
}

// historique non filtré
// produit
$sql = 'SELECT * FROM histo';
$qry = mysql_query($sql);
while($row = mysql_fetch_assoc($qry)) {
   $dataHisto[] = $row;
}

$hsc = function($p) { return htmlspecialchars($p, ENT_QUOTES); }

?>

<?php include('../doctype.html'); ?>

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
      
      <!-- Titre
      ************************************************************-->
      <?php include('../titre.html'); ?>

      <!-- Feuille de style
      ************************************************************-->
      <style type="text/css" media="screen">
         @import url(../styles/style.css);
      </style>
      
      <script type="text/javascript" src="functions.js"></script>

   </head>
   
   <body id="principal">

<?php

// Connexion à la base de données
$server = 'localhost';
$user = 'root';
$pwd = '';
$dbName = 'xls_db';
$cnx = mysql_connect($server, $user, $pwd);
$db = mysql_select_db($dbName);

// REQUETE DONNEES DE LA TABLE
$sql = <<<SQL
SELECT histo.id_produit, histo.type_produit, histo.ros, histo.client, histo.adresse, histo.adresseb, histo.ville, histo.codepostal
FROM histo 
ORDER BY
histo.id_produit ASC,
histo.codepostal ASC, 
histo.type_produit ASC, 
histo.ros ASC,
histo.client ASC,
histo.adresse ASC,
histo.adresseb ASC,
histo.ville ASC
SQL;
$qry = mysql_query($sql);
while($row = mysql_fetch_assoc($qry)) {
$data[] = $row;
}

?>

   <!-- Conteneur
   ************************************************************-->
   <div id="conteneur">

      <!-- En-tete
      ************************************************************-->
      <h1 id="header">
         <?php include("../titrepage.html"); ?>
      </h1>
      


      <!-- Barre verticale
      ************************************************************-->
      <div id="navigation">
         <div id="styles">
               <?php include('../menu.html'); ?>
         </div>
         
         <div id="informations">
         <h2>Informations</h2>
            <?php include('../maj.html'); ?>
         </div>
      </div>

   <!-- Contenu
   ************************************************************-->
   <div id="contenu">
      <div id="main">
      <div id="projet">
      
<p>
<?php
$date = date("d/m/Y");
$heure = date("H:i");
Print("<em>Bonjour, Nous sommes le $date et il est $heure</em>");
?>
</p>
      
      <h2><span>Historique Productions</span></h2>

         <p></p>
         
      </div>

      <div id="base">

      <h3><span>Base de Données Complètes des Productions Afféctées</span></h3>

         <p>
         <!-- Données de la table
         ************************************************************-->
         <table>
           <thead>
             <tr>
               <th>Produit</th>
               <th>Type</th>
               <th>Client</th>
               <th>Adresse A</th>
               <th>Adresse B</th>
               <th>CP</th>
               <th>Ville</th>
               <th>ROS</th>
             </tr>
           </thead>
           <tbody id="table">
             <?php foreach($dataHisto as $row): ?>
             <tr>
               <td><?php echo $hsc($row['id_produit']); ?></td>
               <td><?php echo $hsc($row['type_produit']); ?></td>
               <td><?php echo $hsc($row['client']); ?></td>
               <td><?php echo $hsc($row['adresse']); ?></td>
               <td><?php echo $hsc($row['adresseb']); ?></td>
               <td><?php echo $hsc($row['codepostal']); ?></td>
               <td><?php echo $hsc($row['ville']); ?></td>
               <td><?php echo $hsc($row['ros']); ?></td>
             </tr>
             <?php endforeach; ?>
           </tbody>
         </table>   
         </p>

      </div>

      <!-- Bloc pour mettre des informations en bas de page
      ************************************************************-->
      <div id="infostyle"><span></span></div>

      <!-- /Fin Contenu
      ************************************************************-->
      </div>
   </div>

   <!-- Pied de page
   ************************************************************-->
   <p id="footer">
      <?php include('../foot.html'); ?>
   </p>

<!-- /Fin Conteneur
************************************************************-->
</div>

<!-- Blocs supplémentaires pour ajouter des images
************************************************************-->
<div id="imgbloc1"><span></span></div>
<div id="imgbloc2"><span></span></div>
<div id="imgbloc3"><span></span></div>
<div id="imgbloc4"><span></span></div>
<div id="imgbloc5"><span></span></div>

<!-- Balises de fermeture
************************************************************-->
</body>
</html>


Et celui de mon CSS :

Code: Tout sélectionner
/* Corps
************************************************************/
div {
   padding: 0;
   margin: 0;
}
body
{
   padding: 1ex 0;
   text-align: center;
   font-size: 70%;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   background: #f8f8f8;
   color: #000;
}


/* Liens
************************************************************/
a {
   color: #d00;
   text-decoration: none;
}
a:hover {
   color: #333;
}


/* En-tetes H
************************************************************/
h1 {
   font-size: 2.6em;
   font-weight: bold;
   font-family: Georgia, "Times New Roman", Times, serif;
}
h2 {
   font-size: 1.3em;
   font-weight: bold;
   line-height: 2em;
}
h3 {
   font-size: 1.1em;
   font-weight: bold;
   line-height: 1.5em;
}
h4 {
   font-size: 1em;
   font-weight: bold;
}
h5 {
   font-size: 0.9em;
   font-weight: bold;
}
h6 {
   font-size: 0.8em;
   font-weight: normal;
}


/* Conteneur
************************************************************/
div#conteneur {
   width: 100%;
   margin: 0 auto;
   text-align: left;
   background: #fff;
   border: 1px solid #eee;
}


/* Images
************************************************************/
img {
   border:0;
}

/* En-tete
************************************************************/
h1#header
{
   height: 7ex;
   background: #fff url(bg-header.png) center top;
   margin: 0;
   padding: 0;
   text-align: center;
}
h1#header a
{
   display: block;
   margin: 0 auto;
   color: #000;
   position: relative;
   top: 2ex;
}


/* Contenu
************************************************************/
div#contenu
{
   padding: 0 1em 3ex 14.5em;
}
div#main
{
   position: relative;
   top: 0;
   text-align: left;
}
div#contenu p
{
   margin: 0 0 0 0.7ex;
   line-height: 1.5em;
}

/* Barre verticale
************************************************************/
div#navigation {
   position: relative;
   float: left;
   left: 0;
   padding: 0 0 3ex 0;
   top: 0;
   width: 13em;
   text-align: left;
}
div#navigation h2 {
   padding: 0 0 0 1ex;
   border-bottom: 1px solid #eee;
}
div#navigation p , div#navigation h3 , div#navigation h4 , div#navigation h5 , div#navigation h6{
   line-height: 1.5em;
   padding: 0 0 0 2ex;
}
div#navigation ul {
   list-style-type: none;
   cursor: pointer;
   padding: 0 0 0 0;
   line-height: 1.5em;
}

/* Pied de page
************************************************************/
p#footer {
   clear: left;
   padding: 1em 2ex;
   background: #f5f5f5;
   color: #555;
   margin: 0;
}


.flotte {
float:right;
}

p#footer a{
   color: #555;
   text-decoration: none;
}

/* Tableau
************************************************************/

table {
   border-collapse: collapse;
   padding: 3px;
   font-size: 100%;
}

th {
   border: 1px solid black;
   border-collapse: collapse;
   padding: 3px;
}

tr, td {
   border: 1px dotted black;
   border-collapse: collapse;
   padding: 3px;
}

/* Menu
************************************************************/

#menu{
   width:150px;
   margin:20px auto 0 auto;
}
.menu, .sousmenu{
   text-align:center;
}
.menu{
   height:18px;
   width:150px;
   padding:2px 0;
   background:#404040;
   color:#fff;
}
.sousmenu{
   height:18px;
   width:150px;
   padding:1px 0;
   background:#808080;
   color:#fff;
}

.menu a{
   display:block;
   width:100%;
   height:100%;
   color:#fff;
   font-family:arial,sans-serif;
   font-size:12px;
   font-weight:bold;
   text-decoration:none;
   background:#404040;
}
.sousmenu a{
   display:block;
   width:100%;
   height:100%;
   color:#fff;
   font-family:arial,sans-serif;
   font-size:12px;
   font-weight:bold;
   text-decoration:none;
   background:#808080;
}
.menu a:hover, .sousmenu a:hover, .menu a:active, .sousmenu a:active, .menu a:focus, .sousmenu a:focus{
   background:#C36201;
}

ul , li {
   line-height: 1.5em;
}


Merci d'avance :)
Avatar de l’utilisateur

stevenP

  • Messages: 1
  • Inscrit le: Mer Mars 14, 2012 1:54 pm

Re: Largeur tableau généré en php

par XainPro » Dim Avr 01, 2012 3:57 pm

Try
<!-- Données de la table
************************************************************-->
<div id="the_table">
<table>
<thead>
<tr>
<th>Produit</th>
<th>Type</th>
<th>Client</th>
<th>Adresse A</th>
<th>Adresse B</th>
<th>CP</th>
<th>Ville</th>
<th>ROS</th>
</tr>
</thead>
<tbody id="table">
<?php foreach($dataHisto as $row): ?>
<tr>
<td><?php echo $hsc($row['id_produit']); ?></td>
<td><?php echo $hsc($row['type_produit']); ?></td>
<td><?php echo $hsc($row['client']); ?></td>
<td><?php echo $hsc($row['adresse']); ?></td>
<td><?php echo $hsc($row['adresseb']); ?></td>
<td><?php echo $hsc($row['codepostal']); ?></td>
<td><?php echo $hsc($row['ville']); ?></td>
<td><?php echo $hsc($row['ros']); ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</p>
</div>


/***************************************************************/
CSS
#the_table {width:800px; overflow:hidden; position:relative;}
Avatar de l’utilisateur

XainPro

  • Messages: 3933
  • Inscrit le: Ven Fév 17, 2012 8:10 pm


+ Publier une réponse

Page 1 sur 1