probleme responsive tables

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par razorboy, 13 Février 2016.

  1. razorboy
    razorboy WRInaute discret
    Inscrit:
    7 Décembre 2009
    Messages:
    200
    J'aime reçus:
    0
    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
    [​IMG]

    et en version mobile ca fait ca

    [​IMG]
    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

    Code:
    <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
    Code:
    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

    Code:
    @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
     
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 163
    J'aime reçus:
    326
  3. razorboy
    razorboy WRInaute discret
    Inscrit:
    7 Décembre 2009
    Messages:
    200
    J'aime reçus:
    0
    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
     
  4. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 163
    J'aime reçus:
    326
  5. razorboy
    razorboy WRInaute discret
    Inscrit:
    7 Décembre 2009
    Messages:
    200
    J'aime reçus:
    0
    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..
     
  6. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 163
    J'aime reçus:
    326
    Les tables c'est pas mal mais c'est pour mettre des données tabulaires, pas pour faire un layout en colonnes ;)
     
Chargement...
Similar Threads - probleme responsive tables Forum Date
Probleme avec le responsive Problèmes de référencement spécifiques à vos sites 15 Janvier 2014
problème de redirection incontrôlé URL Rewriting et .htaccess Dimanche à 14:32
WordPress Problème sitemap site multilingue Crawl et indexation Google, sitemaps 26 Juillet 2021
Problème site:pronostics-courses.com Administration d'un site Web 19 Juillet 2021
Problème récent de Crawl Google Crawl et indexation Google, sitemaps 7 Juillet 2021
Search Console Problème d'indexer d'une page sur Google Référencement Google 20 Juin 2021
Search Console Problème de version de langue dans les résultats de recherche Google Référencement international (langues, pays) 17 Juin 2021
Problème suivi Analytics avec AMP Débuter en référencement 12 Juin 2021
Problème suivi GTM : url lancées, cookies absents. Développement d'un site Web ou d'une appli mobile 29 Mai 2021
Problème avec Sirdata... Administration d'un site Web 25 Mai 2021