la tua idea è ottima, solo che quel pezzo di codice css viene interpretato solo se la risoluzione è di un certo tipo, ti posto il codice css completo che sto usando

codice HTML:
@media only screen and (min-width: 481px) and (max-width: 767px){        
table, thead, tbody, th, td, tr {             /* Forza la tabella a non essere più una tabella */
display: block; 
}
        
thead tr {                         /* Nascondiamo l'intestazione della tabella thead */
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #666; }
        
td { 
position: relative;        /* Creiamo lo spazio per l'intestazione  */
padding-left: 50%; 
border:0;
}
        
td:before {     
position: absolute;            /* Creiamo le altre celle per la descrizione */
top: 8px;
left: 20px;
width: 40%;  
font-weight:bold;
}
/*  inseriamo l'etichetta per ciascuna cella con il selettore nth-of-type  */

td:nth-of-type(1):before { content: "Codice"; }                
td:nth-of-type(2):before { content: "Descrizione"; }
td:nth-of-type(3):before { content: "Altezza cm"; }
td:nth-of-type(4):before { content: "Lungh."; }
td:nth-of-type(5):before { content: "Gr./M²"; }
td:nth-of-type(6):before { content: "Spess. µ"; }
td:nth-of-type(7):before { content: "Colore"; }
td:nth-of-type(8):before { content: "Superf."; }
td:nth-of-type(9):before { content: "Confez."; }
td:nth-of-type(10):before { content: "Qta' per collo"; }
td:nth-of-type(11):before { content: "Prezzo Euro"; }
td:nth-of-type(12):before { content: "Qt&agrave"; }

}
quindi quando usare quel pezzo di css lo posso sapere solo nel file css... dovrebbe essere cosi se non erro...
il controllo penso si possa fare solo nel css o sbaglio?
grazie ancora.