Codice CSS da applicare alla tabella per renderla responsive
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: