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;
}
}