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

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:

• CSS display property - w3schools.com
• Box Sizing - CSS-Tricks
• .wrapInner() - jQuery API Documentation