Ho una tabella in html con molte righe che vorrei rendere responsive.
Ecco la grafica attuale:
https://prnt.sc/l0x9u7
Purtroppo le colonne sono 7 così credo che sia difficile rendere leggibile su telefono una tabella di questo tipo.
Mi accontenterei di nascondere delle colonne della tabella solo quando sono sul telefono. Lateralmente alla griglia vorrei però aggiungere un pulsante che permetta di scoprire il contenuto nascosto. Su telefono il pulsante renderebbe la tabella non più responsive ma pazienza, meglio che lasciarla così com’è ora.
Ovviamente se avete altre idee fatemelo sapere.
Non posso capovolgere la tabella in verticale perché le righe sono moltissime.
Ho deciso di postare qui perché ricordo che su questo sito in passato si usava uno script di questo tipo sulle pagine delle guide.
Grazie anticipatamente
codice:<table class="responsive" id="tabella"> <thead> <tr class="intestazioneTabella"> <th>Posizione</th> <th>Utente</th> <th>Latitudine</th> <th>Longitudine</th> <th>Tempo</th> <th>Velocità</th> <th>Azioni</th> </tr> </thead> <tbody> <tr class="misuraTabella"> <td>-</td> <td>-</td> <td>deg</td> <td>deg</td> <td>s</td> <td>m/s</td> <td>-</td> </tr> <tr> <td>0</td> <td>Pippo</td> <td> +12.85692</td> <td> +65.25875</td> <td>01/10/2018 18:24:55</td> <td> 0.000</td> <td> <form action="/admin/delete.jsp" method="POST"> <input name="UserID" value="Pippo" type="hidden"> <input name="DeletePosition" value="0" type="hidden"> <input value="Cancella" type="submit"> </form> </td> </tr> <tr> <td>1</td> <td>Pippo</td> <td> +34.87554</td> <td>+140.00012</td> <td>01/10/2018 18:25:07</td> <td>50.000</td> <td> <form action="/admin/delete.jsp" method="POST"> <input name="UserID" value="Pippo" type="hidden"> <input name="DeletePosition" value="1" type="hidden"> <input value="Cancella" type="submit"> </form> </td> </tr> <tr> <td>2</td> <td>Pippo</td> <td> +65.65400</td> <td>-158.85975</td> <td>01/10/2018 18:25:17</td> <td> 100.000</td> <td> <form action="/admin/delete.jsp" method="POST"> <input name="UserID" value="Pippo" type="hidden"> <input name="DeletePosition" value="2" type="hidden"> <input value="Cancella" type="submit"> </form> </td> </tr> </tbody> </table>