Idéal pour afficher une table planning en responsive

🆙 table_by_columns (table_par_colonnes) : tables responsives par empilement des lignes d'une colonne.

Cliquer pour lire la documentation

Syntaxe {up table-par-colonnes}
< table> ... < /table>
{/up table-par-colonnes}
Les lignes sont empilées par colonnes. Très pratique pour des plannings
@author: lomart @version: UP-1.0 @license: GNU/GPLv3 @credit: John Polacek @tags: Responsive
  • table_by_columns (table_par_colonnes): rien
  • model = up-stacktable: nom d'un fichier CSS prévu par le webmaster pour toutes les tables de la page
  • max-height: permet de limiter la place en hauteur par l'affichage d'un ascenseur
  • breakpoint = 720px: bascule en vue responsive
  • key-width = 35%: largeur de la première colonne en vue responsive
  • title-style: style pour la ligne titre en vue responsive

Style CSS

  • id: Identifiant
  • style: style inline pour balise table
  • class: classe(s) pour balise table (obsolète)
  • css-head (base-css): permet d'ajouter des style à la table incluse

Basé sur un script de John Polacek (Licence MIT)

Cette action permet d'afficher une table de façon responsive. Pour chaque colonne, elle affiche le couple valeur première colonne - valeur de la colonne. Si necéssaire, des ascenseurs (horizontal et/ou vertical) seront ajoutés.

Il suffit d'entourer la table saisie en HTML ou avec un éditeur WYSIWYG comme TinyMCE par les shortcodes de UP

On dispose d'options pratiques comme:

  • breakpoint: indication de la largeur pour bascule en vue responsive. Très pratique pour coller au contenu de la table.
  • max-height: possibilité de limiter la place en hauteur par l'affichage d'un ascenseur
  • modele: modele CSS prévu par le webmaster pour toutes les tables de la page
  • key-width: largeur de la première colonne en vue responsive
  • title-style: personnalisation CSS du titre en vue responsive
UP table par colonnes

Attention: les balises ROWSPAN, THEAD et TFOOT ne sont pas supportées par le script

La mise en forme de la table peut se faire dans un éditeur wysiwyg

Exemple: Planning

Redimensionner votre navigateur pour voir l'effet responsive

Cet exemple fictif reprend les conférences du dernier JoomlaDay

{up table-par-colonnes | breakpoint=600px | title-style=background-color:#069 | key-width=20% | style=width:100%;text-align:center}
---- la table ----
{/up table-par-colonnes}

La bascule responsive se fait à 600px.
En vue responsive, le titre sera sur fond bleu avec une première colonne à 20% de largeur.
La table fera toujours 100% de large.

Heure Lundi 1 Mardi 2 Mercredi 3 Jeudi 4
8h30 Ouverture des portes
9h - 9h30 Keynote d’ouverture Présentation du programme journalier
9h30 - 10h30 Plusieurs millions de Joomleurs en France, c'est possible ! Votre transformation digitale facilitée avec le CMS Joomla! Lightning Talks Développer son business grâce à une bonne relation client
10h30 - 11h Pause
9h30 - 10h30 Vous saurez tout sur Joomla! 3.7 10 tendances SEO à mettre en œuvre avec Joomla! Akeeba Backup & Amazon S3 CCK : NapContent, une nouvelle alternative aux solutions existantes
12h - 13h30 déjeuner
13h30-15h Design de template sur mesure avec Template Creator CK Développer un Composant avec le Builder Cook Self Service Gestion de ses notes et documentation Découvrez le potentiel des champs personnalisés de Joomla 3.7
16h-18h Atelier : Créer une application SEBLOD côté front-end J'aurais dû rester au lit ce matin (conception d'une CVthèque avec Joomla!) Atelier : Surcharges, CSS et JS dans la 3.7 Coupler AcyMailing et ElasticEmail pour une gestion performante de ses newsletters
20h restaurant restaurant diner-spectacle restaurant

Les pays européens

Redimensionner votre navigateur pour voir l'effet responsive

{up table-par-colonnes | max-height=500px | style=border:2px solid red}
---- la table ----
{/up table-par-colonnes}

La bascule responsive n'étant pas spécifiée, elle se fera à la valeur par défaut: 720px. Redimensionnez votre écran pour voir que les 2 tables réagissent différement.
La table a une hauteur maximale de 500px. J'ai ajouté une bordure rouge pour le mettre en évidence.

Balise(s) HTML non autorisée(s) : THEAD
Pour info, cette page utilise 6 action(s) :
upactionslist (1) addcsshead (1) modal (1) table-par-colonnes (2) jcontent-info (1)