Creare tabelle responsive in HTML con No More Tables

Mattepuffo's logo
Creare tabelle responsive in HTML con No More Tables

Creare tabelle responsive in HTML con No More Tables

Programmazione, HTML - CSS

Precisiamo subito che No More Tables non è un plugin / libreria, ma possiamo definirla una tecnica per rendere le tabella HTML responsive.

Questa tecnica è stata inventata da Chris Coyier, ed oggi ne vediamo un esempio.

In sostanza si tratta di una serie di regole CSS con l'aiuto di un attributo da dare alle celle delle righe.

Qui sotto il codice completo; ho messo il CSS direttamente nella pagina per comodità:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>NO MORE TABLES</title>
        </script>
        <style>
            table {
                width: 100%;
            }

            th, td {
                border: 1px solid #999999;
                text-align: center;
            }

            thead {
                background-color: #999999;
            }

            @media only screen and (max-width: 767px) {
                .no-more-tables table,
                .no-more-tables thead,
                .no-more-tables tbody,
                .no-more-tables th,
                .no-more-tables td,
                .no-more-tables tr {
                    display: block;
                }

                .no-more-tables thead tr {
                    position: absolute;
                    top:-9999px;
                    left:-9999px;
                }

                .no-more-tables tr { border: 1px solid #ccc; }
                .no-more-tables td {
                    border: none;
                    border-bottom: 1px solid #eee;
                    position: relative;
                    padding-left: 50%;
                    white-space: normal;
                    text-align:left;
                }

                .no-more-tables td:before {
                    position: absolute;
                    top: 0;
                    left: 6px;
                    width: 45%;
                    padding-right: 10px;
                    white-space: nowrap;
                    text-align:left;
                    font-weight: bold;
                }

                .no-more-tables td:before { content: attr(data-title); }
            }
        </style>
    </head>
    <body>
        <table class="no-more-tables">
            <thead>
                <tr>
                    <th>Nome</th>
                    <th>Email</th>
                    <th>Età</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td data-title="Nome">Matteo</td>
                    <td data-title="Email">m@m.it</td>
                    <td data-title="Età">35</td>
                </tr>
                <tr>
                    <td data-title="Nome">Marco</td>
                    <td data-title="Email">ma@ma.it</td>
                    <td data-title="Età">70</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

La cosa importante è che il valore dato ai vari data-title siano uguali ai nomi messi nelle colonne.

Per il resto sarà il CSS a fare tutto.

Enjoy!

Condividi

Commentami!