Ma table n'entre pas dans la div

Bonjour ou bonsoir,
je fais face a un probleme assez particulier que je n'ai jamais encore rencontrer
je n'arrive pas a entrer une table dans une div pour je ne sais pas quel raison
j'ai une div avec un scroll
et je veux inclure un résultat d'une requete mysql a l'aide d'une table dans la div réception.
alors voici

fait a remarquer: le code css #recetion table n'obéit a rien.
exemple, si j lui met un border ou si je r/duit le with: rien

Est-ce que quelqu'un a une idée du probleme ?
j'ai peiné toute la journée la dessus

merci

<div id="reception">
		 <?php echo'<table>';
		 
			while($infos = mysql_fetch_array($reponse, MYSQL_ASSOC)) {
			
				echo'<tr><td>'.$infos["date_message"].'</td>';
				echo'<td>'.ucfirst($infos["pseudoEnvoyeur"]).'</td>';
				echo'<td>'.ucfirst($infos["pseudoCorrespondant"]).'</td>';
				echo'<td>'.$infos["message"].'</td></tr>';
			}
			
	
		echo'</table>';
		
	?>
   </div><!-- fin de #reception -->

et voici mon code css

#reception {
	
	font-size: 86%;
	width: 99%;
	
	height: 200px;
	margin-top: 4px;
	margin-bottom: 0px;
	border: solid 1px red;
	overflow-y: scroll;
	background-color: #ffc8ee;
}

#reception table {
	
	width: 99%;
	
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	vertical-align: bottom;
	
	border: 0px solid blue;
	-moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(/PIE.htc);
	
	
}

#reception table tr td {
	
	font-size: 1vw;
	padding-top: 1px;
	padding-bottom: 1px;
	
	border: 0px solid red;
	vertical-align: top;
	}

Bonjour,

Ma proposition : CodePen

Le code CSS répliqué ici :

#reception {
	
	font-size: 86%;
	width: 99%;
	height: 200px; /* Je vois le pourquoi de cette règle en lien avec le 'overflow-y: scroll', même si je trouve dommage de devoir passer par une manipulation de ce type... */
	margin-top: 4px;
	margin-bottom: 0; /* Pas d'unité si valeur à 0 */
	border: 1px solid red; /* Le raccourci pour border c'est plutôt dans cet ordre (même si "ça marche")... cf. la spec */
	overflow-y: scroll;
	background-color: #ffc8ee;
}

#reception table {
	
	  width: 100%; /* Pourquoi 99% ? */
	
	  margin-top: 0; /* Pas d'unité si valeur à 0 */
	  /* margin-left: auto; inutile car width: 100% */
	  /* margin-right: auto; idem */
	  /* vertical-align: bottom; Pas sûr que cette règle est un impact sur votre mise en forme... */
	
	  border: 0 solid blue; /* Pas d'unité si valeur à 0 */
	  /* -moz-border-radius: 10px; /* En excursus à votre question : un jour pensez à installer Autoprefixer... De plus : Il est devenu inutile de préfixer cette règle compatible dès IE9*/
    /* -webkit-border-radius: 10px; Idem */
    border-radius: 10px;
    /* behavior: url(/PIE.htc); En 2015 est-ce bien nécessaire de charger des scripts aussi lourds ? Surtout qu'ailleurs vous appelez des règles uniquement interprétables pour les navigateurs récents (vh units), donc de toute façon... */
}

#reception td { /* Là, j'ai évité une sursélection inutile... */
	
	/* font-size: 1vw; je ne ferais pas cela à votre place, si le but était de permettre le responsive c'est de toute façon illisible sur petit écrans. Cf. mon commentaire sur le forum Alsacreations. Pour une résolution rapide la solution passe par une modification du tableau html comme je vous la propose côté html. */
	padding: 5px; /* Quitte à mettre un padding autant qu'il soit un peu significatif, et sur les 4 côté de l'élément... */
	
	/* border: 0px solid red; Si l'épaisseur de la bordure est à 0, autant la supprimer */
	vertical-align: top;
	}

Si vous tenez à avoir un tableau clair sur toute résolution vous pouvez faire quelque chose comme ceci pour le html :

<div id="reception">
  <table>
    <tr>
      <tr>
        <td>02/12/2015
          <br/>
          Envoyeur
          <br/>
          Correspondant
          </td>
        <td>Le message....</td>
      </tr>
      <tr>
        <td>02/12/2015
          <br/>
          Envoyeur
          <br/>
          Correspondant
          </td>
        <td>Le message....</td>
      </tr>
      <tr>
        <td>02/12/2015
          <br/>
          Envoyeur
          <br/>
          Correspondant
          </td>
        <td>Le message....</td>
      </tr>
    </tr>
  </table>
</div>

Pour aller plus loin sur l'adaptation des tableaux en responsive vous pouvez aller voir ici : Tables for Scriptura Framework.
Modifié par Olivier C (02 Dec 2015 - 14:49)

bonjour
merci pour les détails Olivier c, c'est tres intéressant
mon sujet est résolu

et merci aussi gc-nomade