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.
2 comments
Santo
20 Agosto 2021 at 20:25
Thank you for the auspicious writeup. It in fact
was a amusement account it. Look advanced to more added agreeable
from you! By the way, how could we communicate?
Brenton
24 Agosto 2021 at 14:30
Hiya very nice site!! Man .. Beautiful ..
Wonderful .. I will bookmark your web site and take the feeds also?
I am happy to seek out a lot of helpful information right here within the publish, we need work
out extra strategies on this regard, thanks for sharing.
. . . . .