Creare tabelle responsive in WordPress

Utilizzi WordPress per aggiungere tabelle al tuo sito web?

Bene, come avrai notato, se inserisci tabelle in wordpress, le tabelle non saranno correttamente visualizzate su un display mobile.

Ci sono varie soluzioni, in particolare con alcuni plugin di wordpress, ma se vuoi ottenere lo stesso risultato senza utilizzare un plugin e quindi appesantire il tuo sito, in questa guida con un breve codice CSS, puoi trasformare tutte le tue tabelle in tabelle responsive.

E ‘possibile aggiungere e modificare una tabella in WordPress tramite editor visuale. Per fare questo è necessario per attivare il pulsante tabella nella barra degli strumenti.

Per fare ciò, devi installare plugin chiamato MCE Table Buttons.

Una volta installato questo plugin, avrai sul tuo editor visuale di WordPress, la seguente icona.

Aggiungi la tua tabella scegliendo righe e colonne.

Creata ala tua tabella, vedrai che sul tuo pc si vedrai bene, ma se vedi la stessa tabella creta sul tuo smartphone, vedrai che non si visualizzerà bene ed i margini sono mal formattati.

Ed allora, ora non devi fare altro che aggiungere il seguente codice CSS alla pagina nella quale è inserita la tua tabella:

@media screen and (max-width: 600px) {
table {width:100%;}
thead {display: none;}
tr:nth-of-type(2n) {background-color: inherit;}
tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;}
tbody td {display: block;  text-align:center;}
tbody td:before { 
    content: attr(data-th); 
    display: block;
    text-align:center;  
  }
}

Applicato questo codice CSS, avrai la tua tabella in modalità responsive come la seguente:

Condividi:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

quattro + due =