Come rendere le tabelle del plugin TablePress responsive

Usate Tablepress per le vostre tabelle in wordpress? Vi sarete accorti (oppure no) che le tabelle non sono responsive.

Per renderle responsive è sufficiente usate il seguente codice nel functions.php e un pizzico di css


add_filter( 'tablepress_table_output', 'tablepress_output', 10, 3 );
function tablepress_output( $output, $table, $render_options ) {
	return "<div id=\"{$table['id']}-tablepress-scroll-wrapper\" class=\"tablepress-scroll-wrapper\">{$infoscroll}\n{$output}\n{$infoscroll}</div>";

}

Il pratica questo filtro presente nel plugin Tablepress permette di aggiungere elementi durante l’output delle tabelle. In questo esempio non ho fatto nient’altro che avvolgere (wrappare) la tabella in un div, nel mio caso ho aggiunto anche un span dove do indicazioni all’utente che la tabella può essere trascinata verso destra e sinistra, questo span è nascosto per i desktop.

Il Css da usare per rendere la tabella scorrevole è il seguente:

@media only screen and ( max-width: 880px ) {
  .tablepress-scroll-wrapper{ overflow-x: auto;}
  .tablepress-scroll-wrapper table.tablepress{
	display: block;
	overflow-x: auto;
	white-space: nowrap;
  }
}
	

Scarica TablePress


Pubblicato
Etichettato come wordpress

Di Massimo

Ciao sono Massimo, sviluppo siti principalmente con WordPress. Su questo sito trovi appunti e spunti per personalizzare il tuo sito WordPress. Se hai bisogno di una consulenza scrivimi compilando il modulo che trovi nella pagina contatti.