probleme responsive tables

[razorboy]

lut a tous
bon j'ai suivi cet excellent tuto
https://css-tricks.com/responsive-data-tables/
le truc c'est que quand je visionne mon site ben impossible d'avoir une table normale lorsque je rappetit la fenetre afin qu'elle devienne comme un smartphone

en normal ca fait ca

et en version mobile ca fait ca

c'est bien mais c'est pas dans l'ordre

pour pop y'a penso a te et quand il me regarde mais quand je le met en version mobile pour pop il n'y a plus que penso a te et quand il me regarde c'est passé chez hip hop

le code html c'est ca

<table  >
	      
	      <tr>
		  <td><div class="pop">
	 
	   <h2><img src="images/linkstxt/pop.png"  alt="musique  style  pop rock "/></h2>
	     	  
	 <p>penso a te </p>  	  
	 <p><audio controls="controls"> 
   <source src="mp3/pop/penso180414.mp3" type="audio/mp3" /> 
   <source src="mp3/pop/penso180414.ogg" type="audio/ogg" /> 
   Veuillez mettre à jour votre navigateur ! <object type="application/x-shockwave-flash" data="dewplayer.swf?mp3=mp3/pop/penso180414.mp3&autoplay=0" width="200" height="20" id="dewplayer" name="dewplayer">
     <param name="movie" value="dewplayer.swf?mp3=mp3/pop/penso180414.mp3&autoplay=0" />     
     <param name="wmode" value="transparent" />
     </object></audio></p> </td>
	 
	 <td>
	 <h3><img src="images/linkstxt/hip-hop3.png"  alt="musique  style  hip-hop , rap "/></h3>
	 <p>la france des bizounours</p>  	  
	 <p><audio controls="controls"> 
   <source src="mp3/hip-hop/la-france-des-bizounours.mp3" type="audio/mp3" /> 
   <source src="mp3/hip-hop/la-france-des-bizounours.ogg" type="audio/ogg" /> 
   Veuillez mettre à jour votre navigateur ! <object type="application/x-shockwave-flash" data="dewplayer.swf?mp3=mp3/hip-hop/la-france-des-bizounours.mp3&autoplay=0" width="200" height="20" id="dewplayer" name="dewplayer">
     <param name="movie" value="dewplayer.swf?mp3=mp3/hip-hop/la-france-des-bizounours.mp3&autoplay=0" />     
     <param name="wmode" value="transparent" />
     </object></audio></p> </td></tr>
	 
	 	 
	
         	   
       <tr>
	   <td><p>quand il me regarde (chant sarah osten) </p>  	  
	 <p><audio controls="controls"> 
   <source src="mp3/pop/quand-il-me-regarde.mp3" type="audio/mp3" /> 
   <source src="mp3/pop/quand-il-me-regarde.ogg" type="audio/ogg" /> 
   Veuillez mettre à jour votre navigateur ! <object type="application/x-shockwave-flash" data="dewplayer.swf?mp3=mp3/pop/quand-il-me-regarde.mp3&autoplay=0" width="200" height="20" id="dewplayer" name="dewplayer">
     <param name="movie" value="dewplayer.swf?mp3=mp3/pop/quand-il-me-regarde.mp3&autoplay=0" />     
     <param name="wmode" value="transparent" />
     </object></audio></p> </td>
	 
	 <td>
	 
	 <p>45 niggaz</p>  	  
	 <p><audio controls="controls"> 
   <source src="mp3/hip-hop/45-niggaz.mp3" type="audio/mp3" /> 
   <source src="mp3/hip-hop/45-niggaz.ogg" type="audio/ogg" /> 
   Veuillez mettre à jour votre navigateur ! <object type="application/x-shockwave-flash" data="dewplayer.swf?mp3=mp3/hip-hop/45-niggaz.mp3&autoplay=0" width="200" height="20" id="dewplayer" name="dewplayer">
     <param name="movie" value="dewplayer.swf?mp3=mp3/hip-hop/45-niggaz.mp3&autoplay=0" />     
     <param name="wmode" value="transparent" />
     </object></audio></p> </td></tr>
	 
	 <!-- classique -->

et le css pour la version normale c'est ca

table { 
  width: 100%; 
  border-collapse: collapse; 
}
td
{text-align :center;
}

th {text-align :center;
}

j'ai juste rien mis de plus
par contre pour les media queries j'ai mis ca

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table,  tbody, th, td, tr { 
		display: block; 
	}

j'ai tout essayé rien a faire ca marche pas
merci a tous

 

[spout]

Il ne faut pas utiliser une table pour faire ça, ce n'est pas des données tabulaires.
Il faut utiliser soit:
Des floats: http://css.maxdesign.com.au/floatutorial/
Ou multi columns: http://www.w3schools.com/css/css3_multiple_columns.asp (http://caniuse.com/#feat=multicolumn)
Ou flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ (http://caniuse.com/#search=flexbox)

 

[razorboy]

merci de ta reponse rapide mais vu que je vais me taper un nouveau tuto est ce qu'il y en a un meilleur que l'autre?

donc j'efface la table je passe parce que tu as dit et après en responsive ca va aller mieux?

merci

 

[spout]

est ce qu'il y en a un meilleur que l'autre?

J'ai pas comparé, y'en a d'autres que ceux cités.
En français si tu préfères:
http://www.alsacreations.com/tuto/lire/1557-les-multicolonnes-en-css3.html
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html

ca va aller mieux?

Clairement mieux qu'une table oui.

 

[razorboy]

bon merci je vais suivre ton conseil
c'est clair que tout le monde dit du mal des tables mais j'ai jamais compris pourquoi
peut etre y verrais je plus clair avec ces liens..

 

[spout]

Les tables c'est pas mal mais c'est pour mettre des données tabulaires, pas pour faire un layout en colonnes