[Résolu] Mise en forme tableau php

Bonjour,

j'ai un problème de mise en forme que je ne comprends pas

j'affiche mon tableau en php que je mets en forme en css
lorsque le tableau contient des données, l'en-tête est mis en forme comme je le souhaite
par contre, lorsqu'il n'y a aucune données retournée, la larguer de mes colonnes n'est plus prise en compte (par contre la couleur oui)

// début du tableau
							echo '<table>'."\n";
							// première ligne on affiche les titres prénom et surnom dans 2 colonnes
							echo '<tr class="class01">';
							echo '<td>#ID</td>';
							echo '<td>Patient</td>';
							echo '<td>Fiche</td>';
							echo '<td>Question</td>';
							echo '<td>Description</td>';
							echo '<td>Details</td>';
							echo '<td>Corrections</td>';
							echo '<td>NR</td>';
							echo '<td>Commentaires</td>';
							echo '</tr>'."\n";

							// Partie "Boucle"
							// lecture et affichage des résultats sur 2 colonnes, 1 résultat par ligne.    
							while($element= $query -> fetch()) {
							echo '<tr class="class02">';
							echo '<td class="ID">'.$element['id'].'</td>';
							echo '<td class="Patient">'.$element['pat'].'</td>';
							echo '<td class="Fiche">'.$element['fic'].'</td>';
							echo '<td class="Question">'.$element['que'].'</td>';
							echo '<td class="Description">'.$element['des'].'</td>';
							echo '<td class="Details">'.$element['det'].'</td>';
							echo '<td class="Correction">'.$element['cor'].'</td>';
							echo '<td class="NR">'.$element['non_rec'].'</td>';
							echo '<td class="Commentaires">'.$element['com'].'</td>';
							echo '</tr>'."\n";
							}
							echo '</table>'."\n";
							// fin du tableau.

#page 
{
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;

}

/*gestion du bug firefox*/
/*il faut mettre une position absolue au bloc parent body pour pouvoir utiliser le justify-content sur le bloc page*/
body 
{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  font-size: 10px;
  font-family: "Century Gothic","Impact", "Arial Black","Arial", "Verdana", "sans-serif";
}

a:link 
{ 
 text-decoration:none;
 color: black; 
} 

a:hover 
{ 
 text-decoration:none;
 color: orange; 
} 

a:visited 
{ 
 text-decoration:none;
 color: black; 
} 

/********************************************************************************************************/
/*Mise en forme de la page de connexion*/
/*MISE EN FORME A AJOUTER : ajouter texte de remplissage dans les champs INPUT*/
#connexion
{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
}

select
{
  width: 60px;
  font-family: "Century Gothic","Impact", "Arial Black","Arial", "Verdana", "sans-serif";
  font-size: 10px;
}

#filtres input[type=submit]
{
  background-color: orange;
  color: white;
  height : 22px;
}

form
{
	/*padding-left: 220px;*/
}

input
{
  border-radius: 5px;
  font-family: "Century Gothic","Impact", "Arial Black","Arial", "Verdana", "sans-serif";
  font-size: 10px;
}

input[type=text], input[type=password]
{
  width: 190px;
  height: 22px;
}

input[type=submit]
{
  background-color: orange;
  color: white;
  height: 30px;
}
/********************************************************************************************************/


/**************************************************************************************/
/*mise en forme du menu de la page index*/
#separateur
{
  background: url('images/barre_degrade.png') repeat-x bottom;
}

#entete
{
  display: flex;
  /*justify-content: flex-end; /*Problème pour aligner le logo à gauche*/
  justify-content: space-between; /*Problème pour aligner le logo à gauche*/
}

#utilisateur
{
  display: flex;
}

li 
{
  list-style:none; /*enlever le point de la balise li*/
}

#menu_accueil
{
  display : flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 10px;
}

/**************************************************************************************/

#menu
{
  margin-left: 10px;
  margin-right: 20px;
}

#filtres
{
    font-size: 10px;
}
/**************************************************************************************/
/*mise en forme du tableau page "demande de corrections*/

table
{
  border-collapse: collapse;
}

td, th /* Mettre une bordure sur les td ET les th */
{
  border: 2px solid white;
  height: 20px;
}

.ID, .NR
{
  width: 30px;
  text-align: center;
}

.Patient, .Fiche, .Question
{
  width: 60px;
  text-align: center;
}

.Description
{
  width: 150px;
  text-align: center;
}

.Details, .Correction
{
  width: 100px;
  text-align: center;
}

.Commentaires
{
  width: 200px;
  text-align: center;  
}

.class01
{
  background-color: RGB(255,192,0);
  border: 3px solid white;
  text-align: center;
  font-weight: bold;
}

.class02
{
  background-color: RGB(255,232,203);
}

/**************************************************************************************/
#corps
{
  display : flex;

}

#element_tableau
{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/************************************************************************************/
/*couleur de fond de chacun des blocs pour mieux faire la mise en forme*/
#entete
{
  min-height: 100px;
}

#logo
{

}

#photo_utilisateur
{

}

#information_utilisateur
{

}

#corps
{
  min-height: 400px;

}

#pied_de_page
{
  min-height: 40px;
}


#connexion
{
  min-height: 80px;
}

#tableau
{

}

#liens
{
	text-align: center;
}

#filtres
{
	display: flex;

}


/************************************************************************************/

d'avance merci pour votre aide

Bonsoir ,

C'est parce que que le tableau est influencé par le contenu, puisque ta pas ajouté width sur tes colonnes

essayez avec ça

td, th /* Mettre une bordure sur les td ET les th */
{
  border: 2px solid white;
  height: 20px;
  width:200px;   /*  j'ai ajouté ceci  */
}

_________________________________________
emploi en ligne : https://www.sociat.com
Modifié par Billy-senders (08 Nov 2017 - 19:34)

merci, c'est une piste
mais il faut que j'adapte pour pouvoir ajuster la largeur des colonnes indépendamment les unes des autres