WordPress: aggiungere tabelle responsive nel contenuto

Premessa: io non uso Gutenberg. Quindi utilizzo l’editor classico di WordPress (per riportarlo default si installa il plugin Classic Editor). Oltre a questo uso WPBakery Page Bulder (Visual Composer) famosissimo editor in bundle con la maggioranza dei temi.

Purtroppo però rimane un limite per l’inserimento delle tabelle nel contenuto, non ci sono proprio nella toolbar del TinyMCE di WordPress. Possiamo aggiungerle via codice html,o più comodamente installando il plugin TinyMCE Advanced.

Le impostazioni si trovano in “Impostazioni -> TinyMCE Advanced“. Possiamo agire su 4 toolbar, spostando, aggiungendo e rimuovendo i bottoni a piacere, utilizzando il drag&drop. Nel mio caso preferisco le cose semplici, quindi due toolbar come si vede in figura.

Più in basso si trovano ulteriori opzioni, io ho attivato il menu contestuale al tasto destro del mouse, è molto comodo.
Inoltre ho disattivato la prima opzione che permette di ridimensionare le tabelle tramite il mouse. Questo perché non voglio contaminare il codice con dimensioni assolute, vengono poi sparpagliate in tutte le celle. Le tabelle vengono inserite con width 100% di default e le celle si adattano. Nel caso volessi fare delle eccezioni ho sempre la possibilità di usare la toolbar per inserire un valore fisso nelle celle che desidero.

A questo punto possiamo creare le tabelle utilizzando gli strumenti che si spiegano da soli, si possono modificare le impostazioni della tabella, le righe, e le celle. Non approfondisco in questo tutorial. Dico solo che le nuove toolbar del TinyMCE sono compatibili anche con WPBakery, come si vede in figura.

Rendere automaticamente responsive le tabelle

Il lavoro è fatto a metà, le tabelle sono inserite nelle pagine, però fanno schifo nei mobile, come era previsto.

La mia soluzione è una manipolare il Dom Document del contenuto inglobando ogni tabella in un contenitore tramite javascript, precisamente con una piccola funzione JQuery. Va inserita in un file JS del tema Child.

jQuery(document).ready( function($){
  $('table').wrap('<div class="table-responsive"></div>');
});

Se il tuo tema ha Boostrap, il lavoro è finito. Altrimenti manca la parte CSS che formatta le tabelle, puoi aggiungerla nel file  “style.css” del tema Child.

Non solo aggiungo una scrollbar usando l’overflow-x, ma imposto anche una dimensione minima per la tabella contenuta nel div: questo perché le tabelle fluide, al 100%, nei mobile possono risultare troppo strette. Io ho impostato 400px ma puoi mettere la dimensione che si adatta meglio alle tue esigenze.

.table-responsive{
  display: block;
  width: 100%;
  overflow: hidden;
  overflow-x: auto;
}
.table-responsive table{
  min-width: 400px;
}

Il risultato finale è come in figura.