Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 16

Hybrid View

  1. #1
    Utente di HTML.it
    Registrato dal
    May 2021
    Messaggi
    12

    Tabella costruita con javascript...responsive

    Salve a tutti,

    è il mio primo post :-)

    domanda tecnica:
    avendo costruito una tabella per un esame universitario con jasvascript (D3) HTML e CSS mi chiedevo se fosse possibile creare un CSS ad hoc per dispositivi mobili.

    Ora. la pagina HTML ottenuta è una normale tabella:

    codice HTML:
    <table>
         <thead>
                <tr>
                    <th> </th>
                    ...
               </tr>
         </thead>
         <tbody>
                <tr>
                    <td> </td>
                    ...
               </tr>
         </tbody>
    </table>
    Vorrei sapere se posso fare in modo che tale tabella diventi responsive visualizzando ad es.
    2 colonne vicine A CAPO
    2 colonne vicine A CAPO
    2 colonne vicine ...

    in realtà è leggermente più complicato di così...
    non riesco a caricare la foto perchè il limite del forum è 20kb....


  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,682
    Ciao e benvenuto, non ho ben capito quale risultato vorresti ottenere, in effetti sarebbe utile vedere un'immagine o un esempio concreto.

    Nel frattempo prova a dare uno sguardo a queste guide dove sono riepilogate e descritte varie soluzioni per rendere responsive le tabelle:
    Accessible, Simple, Responsive Tables
    Responsive Data Table Roundup

    Vedi se trovi qualcosa che può andare bene, altrimenti prova a fornire maggiori dettagli.

    non riesco a caricare la foto perchè il limite del forum è 20kb....
    La piattaforma è vecchia, non regge troppo peso
    Prova con un formato piccolo, magari .gif in bianco e nero, oppure usa un servizio di image sharing e posta qui il link.
    Ultima modifica di KillerWorm; 01-05-2021 a 23:11
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Utente di HTML.it
    Registrato dal
    May 2021
    Messaggi
    12
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Ciao e benvenuto, non ho ben capito quale risultato vorresti ottenere, in effetti sarebbe utile vedere un'immagine o un esempio concreto.

    Nel frattempo prova a dare uno sguardo a queste guide dove sono riepilogate e descritte varie soluzioni per rendere responsive le tabelle:
    Accessible, Simple, Responsive Tables
    Responsive Data Table Roundup

    Vedi se trovi qualcosa che può andare bene, altrimenti prova a fornire maggiori dettagli.


    La piattaforma è vecchia, non regge troppo peso
    Prova con un formato piccolo, magari .gif in bianco e nero, oppure usa un servizio di image sharing e posta qui il link.
    ciao...intanto grazie della risposta e del benvenuto :-)
    (ho cercato al sezione di presentazione sul forum ma non mi pare di aver trovato nulla...)
    posto qui il link all'immagine

    https://ibb.co/zVLTghG

    come vedi la tabella è un semplice palinsesto... però in responsive vorrei che nella schermata del device ci fossero: "dalle" + "alle" + "giorno settimana"
    questo per ogni schermata fino a domenica naturalmente :-)

    spero di aver chiarito e mi scuso per la nebulosità precedente :-)
    Ultima modifica di albertok; 02-05-2021 a 09:48

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,682
    (ho cercato al sezione di presentazione sul forum ma non mi pare di aver trovato nulla...)
    Che io ricordi, su questo forum non c'è mai stata una sezione apposita per le presentazioni ma, nel caso tu abbia piacere di farlo, puoi presentarti al forum usando la sezione off-topic.

    posto qui il link all'immagine
    [...]
    spero di aver chiarito e mi scuso per la nebulosità precedente :-)
    Ho visto, sì, ora è certamente più chiaro il contesto e il risultato che intendi ottenere

    Ho l'impressione che non sarà così semplice per via della natura stessa delle tabelle. La struttura della tabella vede la riga come contenitore in cui sono presenti le celle - tali celle (relativamente alla serie di righe dell'intera tabella) formano solo idealmente le colonne - per cui, frammentare la tabella in gruppi di colonne, per essere incolonnati a loro volta, non è fattibile in modo semplice.

    Un'idea potrebbe essere quella di suddividere a priori la tabella in tabelle di 3 colonne, così che su mobile sia possibile disporle una sotto l'altra e, viceversa, su desktop siano affiancate l'una con l'altra nella stessa linea (in modo che appaiano come se fosse un'unica tabella)

    Non so se tu possa farlo facilmente con D3.js.

    Per ora non saprei cos'altro consigliarti ma, se nel frattempo non ottieni altre soluzioni, posso provare più tardi a fare qualche altra ricerca.

    Buona domenica
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  5. #5
    Utente di HTML.it
    Registrato dal
    May 2021
    Messaggi
    12
    grazie della risposta;

    a dire il vero stavo provando a gestire la cosa con:

    codice:
    
    ​@media only screen and (min-width:250px) and (max-width:1000px)     {
            tr :first-child,            /*prima cella "dalle" LUN*/
            tr :nth-child(2),           /*seconda cella "alle" LUN*/
            tbody tr td:first-child,    /*prima colonna "dalle" LUN*/
            tbody tr td:nth-child(2) {  /*seconda colonna "alle" LUN*/
                width: 15%;
            }
    
            tr :nth-child(3),           /*intestazione LUN*/
            tbody tr td:nth-child(3) {  /*colonna LUN*/
                width: 70%;
            }
            
            tr :nth-child(4),
            tr :nth-child(5),
            tr :nth-child(7),
            tr :nth-child(8),
            tr :nth-child(10),
            tr :nth-child(11),
            tr :nth-child(13),
            tr :nth-child(14),
            tr :nth-child(16),
            tr :nth-child(17),
            tr :nth-child(19),
            tr :nth-child(20),
            tbody tr td:nth-child(4),
            tbody tr td:nth-child(5),
            tbody tr td:nth-child(7),
            tbody tr td:nth-child(8),
            tbody tr td:nth-child(10),
            tbody tr td:nth-child(11),
            tbody tr td:nth-child(13),
            tbody tr td:nth-child(14),
            tbody tr td:nth-child(16),
            tbody tr td:nth-child(17),
            tbody tr td:nth-child(19),
            tbody tr td:nth-child(20)
             {
                float: right;
                width: 14%;
            }
            
            tr :nth-child(6),
            tr :nth-child(9),
            tr :nth-child(12),
            tr :nth-child(15),
            tr :nth-child(18),
            tr :nth-child(21),
            tbody tr td:nth-child(6), 
            tbody tr td:nth-child(9), 
            tbody tr td:nth-child(12), 
            tbody tr td:nth-child(15), 
            tbody tr td:nth-child(18),
            tbody tr td:nth-child(21) {
                float: right;
                width: 68%;
            }
    
    ...ma credo di aver incasinato qualcosa come ragionamento....

  6. #6
    Utente di HTML.it
    Registrato dal
    May 2021
    Messaggi
    12
    Ecco qui il risultato per la PORZIONE DI tabella inerente il lunedi:

    https://ibb.co/PNtDNnf

    ed ecco qui il codice che ho usato:

    codice:
    @media only screen and (min-width:150px) and (max-width:800px) 
        {
            thead tr :first-child,      /*1 cella INTESTAZIONE "dalle" LUN*/
            tbody tr td:first-child,    /*1 colonna "dalle" LUN*/
            thead tr :nth-child(2),     /*2 cella INTESTAZIONE "alle" LUN*/
            tbody tr td:nth-child(2)    /*2 colonna "alle" LUN*/
            {  
                width: 15%;
            }
    
            thead tr :nth-child(3),     /*3 cella INTESTAZIONE LUN*/
            tbody tr td:nth-child(3)    /*3 colonna LUN*/        
            {  
                width: 70%;
            }
    
    il difficile però adesso è dire al prossimo blocco che sarebbe la colonna (4) "dalle" di andare a capo DOPO la colonna (3) LUNEDI (con un float:left?)

    edit: ho fatto una caxxata... gli altri elementi erano dispaly: none... per forza che la tabella veniva giusta...

    colonna (4) dalle
    codice:
          thead tr :nth-child(4),     /*4 cella INTESTAZIONE "dalle" MART*/
          tbody tr td:nth-child(4)    /*4 colonna "dalle" MART*/
            {
                   ??????????
            }
    
    che ne pensate?
    Ultima modifica di albertok; 02-05-2021 a 19:14

  7. #7
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,682
    Mi spiace, ma penso che in quel modo tu ottenga un CSS alquanto ridondante e che comunque non può funzionare
    il difficile però adesso è dire al prossimo blocco che sarebbe la colonna (4) "dalle" di andare a capo DOPO la colonna (3) LUNEDI (con un float:left?)
    Esattamente ciò che cercavo di spiegare nel precedente post... ma io stesso ho fatto fatica a capirmi

    La struttura della tabella vede la riga come contenitore in cui sono presenti le celle - tali celle (relativamente alla serie di righe dell'intera tabella) formano solo idealmente le colonne - per cui, frammentare la tabella in gruppi di colonne, per essere incolonnati a loro volta, non è fattibile in modo semplice
    Ciò che comanda sono le righe e, solo dopo, le colonne (formate dalle singole celle dentro le righe).
    In altre parole, dal momento che i <td> (che formano le colonne) stanno dentro i <tr> (le righe), non è sostanzialmente possibile dirgli di "rompere" i relativi <tr> a partire da un dato <td> per fare in modo che tale <td>, e tutto ciò che lo segue, si posizioni dopo quella che sarà (man mano) la fine della totalità dei <tr>... mi sa che ho peggiorato.

    Ad ogni modo, il mio consiglio è quello di rivalutare la struttura stessa della tabella in modo tale da poter identificare "fisicamente" i gruppi di colonne che vuoi riposizionare.

    Ho fatto varie prove e sono arrivato a questa soluzione (qui il Pen di esempio):
    codice HTML:
    <!DOCTYPE HTML>
    <html lang="it">
      <head>
        <title>Esempio</title>
        <style>
          body {
            text-align: center;
            font-family: sans-serif;
          }
    
          .rtable {
            display: inline-table;
            border-collapse: collapse;
          }
    
          .rtable th,
          .rtable td {
            padding: 8px 12px;
            border: 1px solid #000;
          }
    
          .rtable th {
            color: #fad430;
            background: #0e2071;
          }
    
          .rtable td:nth-child(-n+2) {
            color: #fbe16b;
            background: #51649c;
          }
    
          .rtable th:nth-child(3) {
            text-transform: uppercase;
          }
    
          @media only screen and (min-width: 600px) {
            .rtable {
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
            }
    
            .rtable tbody {
              margin-bottom: 2px;
              box-shadow: 2px 1px 3px -1px #000;
            }
    
            .rtable th:last-child,
            .rtable td:last-child {
              border-right: 0;
            }
          }
    
        </style>
      </head>
      <body>
       <h1>
         Lorem ipsum dolor sit amet
       </h1>
       <p>
         Morbi venenatis nibh sit amet mi elementum semper.
       </p>
       <table class="rtable">
         <tbody>
           <tr><th>dalle<th>alle<th>Lunedì</tr>
           <tr><td>08:00<td>09:00<td>programma01</tr>
           <tr><td>09:00<td>10:00<td>programma02</tr>
           <tr><td>10:00<td>11:00<td>programma03</tr>
         </tbody>
         <tbody>
           <tr><th>dalle<th>alle<th>Martedì</tr>
           <tr><td>08:00<td>09:00<td>programma01</tr>
           <tr><td>09:00<td>10:00<td>programma02</tr>
           <tr><td>10:00<td>11:00<td>programma03</tr>
         </tbody>
         <tbody>
           <tr><th>dalle<th>alle<th>Mercoledì</tr>
           <tr><td>08:00<td>09:00<td>programma01</tr>
           <tr><td>09:00<td>10:00<td>programma02</tr>
           <tr><td>10:00<td>11:00<td>programma03</tr>
         </tbody>
         <tbody>
           <tr><th>dalle<th>alle<th>Giovedì</tr>
           <tr><td>08:00<td>09:00<td>programma01</tr>
           <tr><td>09:00<td>10:00<td>programma02</tr>
           <tr><td>10:00<td>11:00<td>programma03</tr>
         </tbody>
         <tbody>
           <tr><th>dalle<th>alle<th>Venerdì</tr>
           <tr><td>08:00<td>09:00<td>programma01</tr>
           <tr><td>09:00<td>10:00<td>programma02</tr>
           <tr><td>10:00<td>11:00<td>programma03</tr>
         </tbody>
         <tbody>
           <tr><th>dalle<th>alle<th>Sabato</tr>
           <tr><td>08:00<td>09:00<td>programma01</tr>
           <tr><td>09:00<td>10:00<td>programma02</tr>
           <tr><td>10:00<td>11:00<td>programma03</tr>
         </tbody>
         <tbody>
           <tr><th>dalle<th>alle<th>Domenica</tr>
           <tr><td>08:00<td>09:00<td>programma01</tr>
           <tr><td>09:00<td>10:00<td>programma02</tr>
           <tr><td>10:00<td>11:00<td>programma03</tr>
         </tbody>
       </table>
      </body>
    </html>
    Come puoi vedere nel codice HTML ho "raggruppato" preventivamente le relative 3 colonne per ogni giorno. In pratica è come se avessi "invertito" la priorità tra colonne e righe (o meglio, tra i gruppi di colonne e le righe).

    Nel precedente post ti ho suggerito di suddividere la tabella in più sotto tabelle; sostanzialmente è ciò che ho fatto qui ma, anziché usare più tabelle, ho usato il tag <tbody> (è consentito infatti avere più tbody dentro una stessa table) per creare dei contenitori di righe all'interno della stessa tabella.

    In questo modo, ogni <tbody> identifica implicitamente un gruppo di colonne, per cui sarà possibile "manovrarlo" attraverso il CSS.

    L'impostazione del CSS è volutamente "Mobile First" per cui di default avrai la tabella disposta esattamente così come è rappresentata dal codice HTML: ogni gruppo (<tbody>) risulta impilato uno sull'altro. Nella media query (impostata con min-width:600px) si va a "mettere in riga" i tbody attraverso l'uso di flexbox.

    Questo è quanto. Il resto delle regole sono giusto degli accorgimenti per abbellire la presentazione.

    Sta ora a te impostare la costruzione della tabella per ottenere tale struttura.

    Magari fai qualche prova e fai sapere.

    Buona serata
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  8. #8
    Utente di HTML.it
    Registrato dal
    May 2021
    Messaggi
    12
    Grazie della risposta...

    il problema è che in realtà il tutto si basa su uno script javascript/D3... dovrei rielaborare quello.

    Questo è un elaborato che devo presentare per un esame all'università... il template responsive in realtà era un di più per fare bella figura...

  9. #9
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,682
    il problema è che in realtà il tutto si basa su uno script javascript/D3... dovrei rielaborare quello.
    dai, non sarà altro che qualche append('tbody') da aggiungerci e scambiare qualche riga di codice. Non voglio credere che sia una cosa così complicata

    Vedo invece difficile riuscire ad arrivare ad una soluzione se non modificando la struttura HTML di quella tabella.

    Se puoi postare la parte di script interessata, che crea la tabella con D3, potrei dargli uno sguardo appena possibile.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  10. #10
    Utente di HTML.it
    Registrato dal
    May 2021
    Messaggi
    12
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Se puoi postare la parte di script interessata, che crea la tabella con D3, potrei dargli uno sguardo appena possibile.
    Allora:
    così a occhio bisognerebbe creare 7 tabelle diverse (LUN. MART, MERC, GIOV, VEN SAB);
    Per farlo il terzo d3.select andrebbe ripetuto 7 volte... a sto punto servirebbe un ciclo;
    una volta create le sette tabelle bisogna riempirle coi dati, con un altro ciclo, applicare il metodo d3.csv con relativi if e split dei dati contenuti nel file .csv originale;


    comunque ecco il codice javascript / D3:

    codice:
    /* inserimento titolo h2 e paragrafo */
    d3.select("body")
        .append("h2")
        .text("Palinsesto programmi 2021")
    d3.select("body")
        .append("p")
        .text("Qui trovate la nostra programmazione settimanale: cliccate sul nome del proogramma per aprire la pagina relativa")
    
    /* inserimento dell'intestazion della tabella con le relative etichette */
    d3.select("body")
        .append("table")
        .append("thead")
        .append("tr")
        .selectAll("th")
        .data(["dalle", "alle", "LUNEDI", "dalle", "alle", "MARTEDI", "dalle", "alle","MERCOLEDI", 
               "dalle", "alle", "GIOVEDI", "dalle", "alle", "VENERDI", "dalle", "alle", "SABATO", 
               "dalle", "alle", "DOMENICA"
        ])
        .enter()
        .append("th")
        .text(function (d) { return d });
    
    d3.select("table")
        .append("tbody")
        .enter();
    
    /*divisione di ogni dato array in 3 parti ProgrammaNome, ProgrammaUrl e datoClasse */
    d3.csv("Palinsesto.csv", function (datiCaricati) {
        console.log(datiCaricati);
        var d = datiCaricati;
        d3.select("tbody")
            .append("tr")
            .selectAll("td")
            .data([d.dalle, d.alle, d.LUNEDI, d.dalle, d.alle, d.MARTEDI, d.dalle, d.alle, d.MERCOLEDI, 
                   d.dalle, d.alle, d.GIOVEDI, d.dalle, d.alle, d.VENERDI, d.dalle, d.alle, d.SABATO, 
                   d.dalle, d.alle, d.DOMENICA])
            .enter()
            .append("td")
            .attr("class",function(d){
                const [Pippo, Pluto, Topolino] = d.split("|");    
                return Topolino;
                })
            .html(function (cella) {
                    const [ProgrammaNome, ProgrammaUrl, classeCella] = cella.split("|");
                    /* se la cella ha il valore dell'url, inserisco un link */
                    if (ProgrammaUrl) {
                       return "<a href='" + ProgrammaUrl + "' target='blank' \">" + ProgrammaNome + "</a>"
                    }
                    /* altrimenti mostro un testo normale */
                    /*Se non ci fosse le colonne "dalle" e "alle" non verrebbero visualizzate */
                    else {
                        return ProgrammaNome
                    }
                  }
                 )
        
    });
    
    Grazie
    Comunque... l'elaborato così com'è va già bene... ma se riuscissi a cavarmi sto sfizio del responsive sarebbe carino :-)
    Ultima modifica di albertok; 03-05-2021 a 09:35

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 © 2024 vBulletin Solutions, Inc. All rights reserved.