web-dev-qa-db-fra.com

Comment faire table sensible

J'ai un tableau pour représenter des données dans ma page HTML. J'essaie de rendre cette table aussi sensible. Comment puis-je faire ceci?

Voici le Demo .

htmlcsshtml5responsive-designmedia-queries
41
Bishan

Fondamentalement

Une table sensible est simplement une table à 100% de largeur.

Vous pouvez simplement configurer votre table avec ce CSS:

.table { width: 100%; }

Demo here

Vous pouvez utiliser des requêtes multimédia pour afficher/masquer/manipuler des colonnes en fonction des dimensions de l'écran en ajoutant une classe (ou en ciblant à l'aide de nth-child, etc):

@media screen and (max-width: 320px) {
    .hide { display: none; }
}

[~ # ~] html [~ # ~] 

<td class="hide">Not important</td>

Des solutions plus avancées

Si vous avez une table contenant beaucoup de données et que vous souhaitez la rendre lisible sur des appareils à petit écran, il existe de nombreuses autres solutions:

  • css-tricks.com propose jusqu'à cet article pour le traitement de tables de données volumineuses.
  • Zurb a également rencontré ce problème et résol en utilisant javascript.
  • Footables est un excellent plugin jQuery qui vous aide également à résoudre ce problème.
  • Tel que publié par Elvin Arzumanoğl c'est un très bon liste d'exemples .
47
hitautodestruct

Vérifiez les liens ci-dessous pour le tableau sensible:

http://css-tricks.com/responsive-data-tables/

http://zurb.com/playground/responsive-tables

http://zurb.com/playground/projects/responsive-tables/index.html

17
Swarnamayee Mallia

Vous pouvez voir ceci Démo ou bootstrap

5
Elvin Mammadov

Si vous voulez contrôler les td/th comme vous pouvez le faire avec des éléments au niveau des blocs et des floats: ce n'est PAS possible. Il n'y a aucun moyen de faire flotter un td au dessus ou en dessous d'un th.

1
interface

Je recommande le Wordpress Tableau réactif Magic Liquidizer .

1
ElvinD

Pour rendre la table responsive, vous pouvez créer 100% de chaque "td" et insérer une rubrique associée dans le "td" du mobile (moins la largeur de "768px").

Voir plus:
http://wonderdesigners.com/?p=227

0
wonder