jQuery Girl
  1. jQuery Girl
  3. Tables réactives
Intereting Posts
Trouver l’option sélectionnée par défaut dans la balise de sélection HTML? ‘$’ n’est pas défini Option d’annulation déplaçable jQuery Recherche d’interface utilisateur JQuery à saisie semi-automatique au début Puis-je transmettre la valeur viewbag à jQuery dans mvc2 jQuery sélectionne la même OPTION sur trois menus déroulants SELECT avec une action largeur dynamic de li en fonction du nombre de lis dans un ensemble Est-ce que .toggle () est obsolète dans les dernières versions de jQuery? Comment append et supprimer dynamicment des tabs JQuery? charger sous certaines conditions du code HTML en fonction de la taille de la fenêtre : remote => true ne fonctionne pas lorsqu’un uploader de fichier est utilisé dans un formulaire définir la date par défaut dans datepicker avec les mardis et mercredis uniquement? Validation des entrées d’un tableau à l’aide du plugin de validation jquery Meteor.js retourne innerHTML dans l’aide Comment masquer les images jusqu’à ce que jQuery flexslider ait fini de se charger

Tables réactives

J’essaie de faire en sorte que les données de la table sur lesquelles je travaille soient réactives d’une manière que je ne pense pas possible à ma connaissance, à moins que d’autres personnes ici le pensent.

Fondamentalement, j’ai une table qui à la taille maximale montre 3 éléments TD dans un TR. Lors du défilement jusqu’à la taille minimale, le TR n’affiche plus que 2 éléments TD, le troisième TD précédemment étant affiché sous le 2. Quelque chose comme ceci (représentation plus ou moins visuelle):

Largeur maximale: 

  
 First table data Second table data Third table data Fourth table data Fifth table data Sixth table data 
  
  Largeur min .: 
 
 


  
 First table data Second table data Third table data Fourth table data Fifth table data Sixth table data 
  
  Est-ce seulement possible?  Si oui, comment commencer?  Est-ce que cela nécessiterait jQuery? 


    


	

		      	
  Oui c’est possible.  Définissez les éléments TD pour qu’ils flottent à gauche et définissez min-width 


  http://jsfiddle.net/RnmLF/1/ 


  Il suffit de changer la taille du conteneur pour le voir fonctionner. 


  Je voudrais regarder si oui ou non vous avez besoin d’utiliser un tableau si.  Les tableaux ne sont utilisés que pour afficher des données tabulaires ces jours-ci (nous ne sums plus dans les années 90) 


  MODIFIER 


  J’ai pris la liberté de fournir une version NON table pour l’accessibilité (voir @timmied pour les raisons) 


  http://jsfiddle.net/nW2hx/ 






		      	
  Cela peut être fait si toutes vos cellules de données sont sur une ligne.  (Voir @webnoob sa solution). Sinon, vous pouvez également placer vos données dans des éléments DIV.  Ils peuvent le faire facilement. 


  Vous n’avez pas d’en-tête de ligne ou de colonne, je suppose donc que vous pouvez le faire facilement, car vos données n’ont évidemment aucune relation avec la colonne ou la ligne en cours. 


  Comme indiqué dans mon commentaire ci-dessous, la raison pour laquelle je mentionne utiliser autre chose que table est qu’elle ne semble pas représenter de données tabulaires.  Lire la suite ici: Pourquoi ne pas utiliser des tableaux pour la mise en page en HTML? 






		      	
  Veuillez vérifier votre requête au lien ci-dessous, ici vous pouvez résoudre votre problème de table sensible 


  http://css-sortingcks.com/examples/ResponsiveTables/responsive.php 






		      	
  Si cela ne vous dérange pas d’utiliser divs au lieu de table / tr / td, voici un exemple complet d’options différentes utilisant flexbox: Les tables Really Responsive utilisant Flexbox .  Au niveau le plus complexe, vous obtiendrez ce qui suit: 


 First Second Third Fourth Fifth Sixth Seventh Eighth First Third Fifth Seventh Second Fourth Sixth Eighth First Fifth Second Sixth Third Seventh Fourth Eighth