Visualizzazione dei risultati da 1 a 2 su 2

Discussione: Rendere responsive una tabella

  1. #1

    Rendere responsive una tabella

    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>
    Più pratica in futuro...

  2. #2
    Ho deciso di creare 2 tabelle distinte, una per smartphone e l’altra per pc con java e poi con CSS visualizzare quella corretta in questo modo:
    codice:
    @media screen and (max-width: 600px) {
        table#tabella {
            display: none;
        }
        table#tabella_responsive {
            display: block;
        }
    }
    @media screen and (min-width: 600px) {
        table#tabella {
            display: block;
        }
        table#tabella_responsive {
            display: none;
        }
    }
    Il codice funziona però vorrei migliorarlo. Che tipo di codice CSS potrei inserire dentro il primo blocco per rimpicciolire ulteriormente la tabella nel caso la nuova tabella fosse ancora troppo larga?
    Grazie
    Ultima modifica di giannino1995; 01-10-2018 a 20:10
    Più pratica in futuro...

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.