Blog InformaticaCSSJavascript13 Novembre 2019by Daniele Carnovale2Bloccare colonne e righe multiple di tabella html solo con CSS

Mi capita spesso quando programmo di cercare soluzioni sul web. Il punto di partenza per la ricerca è sempre la traduzione del problema in inglese (cosa brutta e contro l’obiettivo del blog 🙂 ). In questo caso Fix Multiple row and column table html (esempio).

I risultati sono molteplici e anche molto diversi tra loro. I principali prevedono l’utilizzo di javascript o jQuery. Subito inizi a pensare che per bloccare colonne e righe di una tabella html sei obbligato ad utilizzare script di computazione lato client e quindi migliori la tua ricerca per poter trovare la migliore libreria gratuita che ti permetta di farlo nel modo più facile e veloce. Tra le migliori soluzioni offerte c’è di sicuro datatables ma esistono anche altre valide librerie come tablesorter oppure tabulator. Soluzione trovata problema risolto.

Sicuro che è la soluzione migliore?

Se oltre a bloccare colonne e righe avete bisogno di altre funzionalità quali, cerca nella tabella, ordinamento, estrai in excell ecc.. allora potreste aver scelto la soluzione migliore. Se invece eravate interessati solo a bloccare colonne e righe di una tabella html forse state caricando codice inutile, state appesantendo la pagina. Inoltre se la tabella è davvero grande e contiene molte righe e molte colonne, la soluzione potrebbe anche essere controproducente. Infatti la computazione lato client potrebbe essere molto onerosa per il Browser e potrebbe impiegare parecchio tempo. Altro inconveniente di una soluzione del genere è che alla tabella verrebbe aggiunto uno scroll aggiuntivo rispetto a quello nativo del Browser e la navigazione e l’usabilità della tabella stessa risulterebbe compromessa.

Soluzione semplice ed efficace CSS

    <style>
        table {
            position: relative;
            border-collapse: collapse;
        }
        thead th {
            position: -webkit-sticky; /* for Safari */
            position: sticky;
            top: 0;
            background: #000;
        }
        td:first-child, th:first-child {
            position:sticky;
            left:0;
            z-index:1;
            background-color: rgb(130, 163, 172);
        }
        td:nth-child(2),th:nth-child(2)  {
            position:sticky;
            left:112px;
            z-index:1;
            background-color: rgb(130, 163, 172);
        }
        td:nth-child(3),th:nth-child(3)  {
            position:sticky;
            left:212px;
            z-index:1;
            background-color: rgb(130, 163, 172);
        }
        .tableFixHead th {
            position: sticky;
            top: 30px;
            background: #eee;
            z-index:200
        }
        th:first-child , th:nth-child(2) , th:nth-child(3){
            z-index:3
        }
        tbody th {
            position: -webkit-sticky; /* for Safari */
            position: sticky;
            left: 0;
            background: #FFF;
            border-right: 1px solid #CCC;
        }
        .table-sticky>thead>tr>th.row2 {
            background: #009688;
            top: 100px;
            z-index: 10;
            position: sticky;
        }
        .table-sticky>thead>tr>th.row3 {
            background: #009688;
            top: 137px;
            z-index: 10;
            position: sticky;
        }
        .table-sticky>thead>tr>th,
        .table-sticky>thead>tr>td {
            background: #009688;
            top: 41px;
            z-index: 10;
            position: sticky;
        }
        .table-height {
            height: 520px;
            display: block;
            overflow: scroll;
            width: 100%;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        .table-bordered>thead>tr>th,
        .table-bordered>tbody>tr>th,
        .table-bordered>thead>tr>td,
        .table-bordered>tbody>tr>td {
            border: 1px solid #ddd;
        }
</style>

Aggiungendo semplicemente delle classi al thead della tabella il gioco è fatto.

Ora non sò più cosa scrivere ma devo arrivare almeno a 300 parole per avere speranza che qualcuno legga questo articolo. Bene missione compiuta.

Presto aggiornerò l’articolo commentando meglio il codice e con un esempio completo scaricabile. Se qualcuno ha fretta non esiti a contattarmi o lo scriva nei commenti.