13 dicembre 2015

Semplice tabella responsive con WebSite X5 12

La versione 12 di WebSite X5 attualmente non prevede la gestione dell'Oggetto Tabella in modalità responsive: la tabella viene generata con una larghezza fissa, che viene mantenuta in ogni breakpoint, e viene visualizzata una barra di scroll orizzontale per rendere completamente fruibili i contenuti.

La tabella è un elemento complesso: può avere intestazioni di colonna, intestazioni di riga, celle raggruppate etc...
Il codice che vi presentiamo non è universale, ma è valido solo per la tipologia di tabella scelta per questa demo: tabella con intestazione di riga e celle non raggruppate.
Abbiamo impostato un modello con larghezza di 960px ed inserito l'Oggetto Tabella in una riga della griglia della pagina. La tabella è formata da sette colonne, due righe ed intestazioni di riga ottenute attraverso la formattazione.
Qui la demo (versione 12.0.4.20):

demo tabella website x5 12
DEMO

Per rendere questa tabella responsive, al primo breakpoint, abbiamo nascosto la barra di scroll orizzontale e abbiamo adeguato la larghezza complessiva della tabella allo spazio disponibile restringendo le colonne, con questo codice CSS:

@media screen and (max-width:959px) {
  div[id^='imTableObject_'] {
    overflow-x: auto !important;
  }
  table {
    width: auto !important;
  }
}

Il passo successivo è la linearizzazione dei contenuti che noi abbiamo impostato a partire da una larghezza di 719px: abbiamo traslato le proprietà degli elementi della tabella, trasformando le celle in righe e le righe in tabelle, ottenendo così la linearizzazione.
WebSite X5, all'interno di una cella, inserisce diversi elementi HTML che variano in funzione del tipo di contenuto (span, div, b, etc.). Scrivere regole CSS per ciascuno di questi possibili elementi diventerebbe troppo oneroso, quindi abbiamo pensato di avvolgere i contenuti di ogni singola cella in un div, creato con jQuery, che ci servirà come selettore unico per centrare verticalmente il contenuto nella cella linearizzata, qualsiasi esso sia.

Questo è il codice CSS utilizzato:
@media screen and (max-width:719px) {
  table {
    width: 100% !important;
  }
  tr {
    display: table;
    width: 100%;
    margin-bottom: 40px;
    box-sizing: border-box;
  }
  tr td {
    display: table-row;
    width: 100%;
  }
  tr td > div {
    display: table-cell;
    vertical-align: middle;
  }
}

E questo è il codice jQuery:
$(document).ready(function() {
    $("td").wrapInner('<div></div>');
})

Da notare che, utilizzando questi selettori, i codici vengono applicati a tutte le tabelle presenti nella pagina. Se si vuole intervenire solo su una specifica tabella occorre modificare i selettori prendendo come riferimento  l'id dell'Oggetto Tabella oppure l'id di un'ancora assegnata all'oggetto.

Per approfondire l'argomento:



16 commenti:

  1. Salve vorrei provare questi codici in una pagina dove ho inserito alcune tabelle e vorrei renderle responsive ma non so da dove cominciare ad inserire i codici

    RispondiElimina
    Risposte
    1. Ciao Andrea,
      devi inserire i codici in Proprietà della Pagina, Esperto, Prima della chiusura del tag HEAD. Ovviamente devi inserire il codice CSS all'interno dei tag <style></style> e il codice jQuery all'interno dei tag <script></script>. Per avere le idee più chiare puoi guardare il sorgente della demo o scaricare il progetto con la tabella più complessa in questo articolo.
      Ti ricordiamo che i codici, come scritto chiaramente in questo articolo, valgono solo per questa tipologia di tabella.

      Elimina
    2. Grazie ragazzi funziona che è una meraviglia.
      Siete troppo forti

      Elimina
  2. Ciao Ma&Si,
    passavo di qua e ho trovato questo articolo bellissimo; volevo partecipare segnalando che anche io avevo avuto la stessa identica idea durante il beta test della 12 e allora lo avevo realizzato con i flexbox perché li trovo più convenienti per la costruzione di layout complessi interni alla tabella.
    Il mio script é in CSS3 e senza l'uso di jQuery.
    Spinto da questo articolo stasera ci ho rimesso mano per espanderlo ulteriormente e ho reso il mio script compatibile anche con le tabelle del Db Viewer.
    Per chi fosse interessato lo script é nel source di questa pagina: http://censimento.altervista.org/iscritti.php
    Per accedere: teofilo/teofilo
    Ciao ;)

    RispondiElimina
    Risposte
    1. Ciao Fabio,

      grazie per il messaggio e la condivisione.
      Ti facciamo notare che, con quella tipologia di tabella, il CSS da te utilizzato rende difficile la lettura della tabella stessa in quanto le intestazioni di colonna vengono visualizzate raggruppate una sotto l'altra.

      Elimina
    2. Ciao ragazzi; sì, lo so che vengono visualizzate così, ma é giusto così.
      Le intestazioni (possibilmente dando loro un colore di sfondo diverso da quello dei records, all'inizio delle serie definiscono un paradigma strutturale che agevola il lettore nella interpretazione dei contenuti seguenti; in pratica sono una chiave di lettura dei records.
      Inoltre nel plugin jTable contengono la funzionalità di inversione del sorting.
      Comunque se a qualcuno non piace vederle basta toglierle con display: none
      ciao grandi ;)

      Elimina
    3. Ah ora è chiaro... il paradigma strutturale della tua tabella si presta per fare anche esercizi di successioni numeriche :)
      Ciao

      Elimina
    4. cioé? non capisco...mi mettete un ss in questo post per favore? https://answers.websitex5.com/post/140925

      Elimina
    5. Ciao Fabio,
      non c'è bisogno di nessuno screenshot. Se inserisci nella tabella dei valori numerici (per visualizzare ad esempio i dati statistici relativi alle visite di un sito) il problema di leggibilità diventa molto evidente: per capire a cosa si riferisce un valore devi per forza contare le celle.
      Il tuo codice funziona come il nostro... solo in particolari condizioni. Può andare bene per una tabella con la sola funzione di organizzare gli elementi di un layout, oppure con tabelle con intestazioni di righe, oppure per tabelle di una sola riga. Ma non è universale.
      In una tabella come quella del tuo esempio, con la perdita dei riferimenti delle intestazioni di colonna, i dati presenti perdono di significato.

      Elimina
    6. Continuo a non capire; la riga delle intestazioni é presente apposta per descrivere i contenuti delle celle.
      A me pare che il mio script funzioni esattamente come il vostro, tranne che il vostro dimensiona l'altezza delle celle in modo fisso, mentre il mio in modo proporzionale al contenuto ospitato.
      Entrambi gli script perdono il riferimento diretto ai contenuti.
      Ecco i links delle due prove fatte:
      http://strip-bg.16mb.com/tabella-ma-si.html
      http://strip-bg.16mb.com/tabella-fabio.html
      Semmai adesso eliminerò la tabella delle intestazioni per inserirne il contenuto in grassetto direttamente dentro ogni td seguito dai due punti.
      Magari aggiungerò anche un contatore css in testa ad ogni tabellina. Vi piace l'idea?
      PS: metteteci un overflow per togliere la scrollbar orizzontale; é brutta.

      Elimina
    7. Fatto: http://strip-bg.16mb.com/new-table.html
      Che ne dite, ora é buono?
      Il prossimo passo potrebbe essere automatizzare via jQuery la lettura delle intestazioni e la loro scrittura nella pseudoclasse :before
      ...ma adesso vado a nanna! Ciao ;)

      Elimina
    8. Caro Fabio,
      dai tuoi commenti si deduce che hai letto frettolosamente l'articolo e che probabilmente ti sfugge la differenza tra intestazione di riga e intestazione di colonna.

      Infatti, nell'esempio tabella-ma-si.html hai tralasciato parti di codice e hai utilizzato una tabella di tipologia NON rispondente a quella indicata nell'articolo... ovvio che vedi cose brutte :)

      Per quanto riguarda l'ultimo tuo esempio come leggibilità è sicuramente migliore.
      Per tutto il resto non è questo il posto giusto per commentare oltre.

      Buon lavoro.

      Elimina
    9. Ok, allora mostrateci voi un esempio rispondente ed esplicativo.
      Per quel che concerne il mio script, se vorrete, aspetterò critiche o suggerimenti nel post su Answer:
      https://answers.websitex5.com/post/140925
      Buon lavoro anche a voi.

      Elimina
    10. Mhmmm, non ti basta la demo linkata in questo articolo che, ripetiamo, NON vuole essere una soluzione universale?

      Ciao

      Elimina
    11. OpsSS... non avevo visto. Adesso ho riletto con più attenzione e scaricato il progetto, e mi sono reso conto che avevo anche frainteso l'altro articolo appena sorvolato alla buona sulla tabella del cart. Non ha nulla a che vedere con quel che ho fatto io nella Product List di WSX5. Comunque nel mio ho appena inserito la gestione delle intestazioni di riga.
      Spero vi piaccia un po' di più adesso.
      Ciao ;)

      Elimina
  3. Aggiunto ora anche Product List ;)

    RispondiElimina