Tag Archive for: adaptative

FooTable, des tableaux qui s’adaptent à vos écrans (RWD)

15 Dec
December 15, 2012

Les tablettes et autres smartphones n’étaient pas très amis avec les tableaux. Affichage partiel ou information tronquée, tel était le dilemne. FooTable, un plugin Jquery, vient élégamment résoudre le problème.

Le principe? Lors de la construction du tableau, il suffit d’attribuer une class aux colonnes qui seront cachées pour certains périphériques en fonction de la taille de leur affichage. Ainsi seules les colonnes importantes s’affichent, laissant ensuite le soin à l’utilisateur d’afficher telle ou telle autre donnée.

Cela donne un code de type

<table>
      <thead>
        <tr>
          <th data-class="expand">
            Prénom
          </th>
          <th>
            Nom
          </th>
          <th data-hide="phone,tablet">
            Métier
          </th>
          <th data-hide="phone,tablet">
            Téléphone
          </th>
          <th data-hide="phone">
            Status
          </th>
        </tr>
      </thead>

Il suffit de définir ensuite les breakpoint, par exemple

breakpoints: {
  phone: 480,
  tablet: 1024
}

A découvrir sur http://themergency.com/footable/