Pagina 1 di 4 1 2 3 ... ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 31

Discussione: Tabella responsive

  1. #1

    Tabella responsive

    Ciao a tutti, ho una tabella di questo tipo

    codice:
    <table>
            <tbody>
                <tr>
                    <td><img src="img1.png" width="300" height="200" /></td>
                    <td><img src="img2.png" width="300" height="200" /></td>
                    <td><img src="img3.png" width="300" height="200" /></td>
                    <td><img src="img4.png" width="300" height="200" /></td>
                </tr>
                <tr>
                    <td>Text 1</td>
                    <td>Text 2</td>
                    <td>Text 3</td>
                    <td>Text 4</td>
                </tr>
                 <tr>
                    <td><img src="img5.png" width="300" height="200" /></td>
                    <td><img src="img6.png" width="300" height="200" /></td>
                    <td><img src="img7.png" width="300" height="200" /></td>
                    <td><img src="img8.png" width="300" height="200" /></td>
                </tr>
                <tr>
                  <td>Text 5</td>
                  <td>Text 6</td>
                  <td>Text 7</td>
                  <td>Text 8</td>
                </tr>
            </tbody>
        </table>


    Quello che vorrei fare è renderla responsive.... facendo quindi in modo che da desktop abbia 4 colonne come ore.... e da mobile diventi

    Immagine
    Testo
    [spazio]
    Immagine
    Testo
    [spazio]
    Immagine
    Testo
    [spazio]
    ....per 8 volte

    quindi mostrando un elemento per righe da Smartphone e Tablet.

    Ho guardato diversi esempi su Google ma non ne sono venuto a capo con la gestione delle immagini

    Come posso fare?

    Grazie in anticipo per l'aiuto!!
    Iceberg

  2. #2
    Per adattarsi la tabella non deve avere immagini con misure fisse e neanche immagini con misure sia in larghezza che in altezza ma solo in larghezza e non fisse
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  3. #3
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    18,613
    al di là del problema della dimensione delle immagini lasciati ispirare da questo esempio:
    https://css-tricks.com/examples/Resp...responsive.php
    o da questo:
    https://codepen.io/AllThingsSmitty/pen/MyqmdM
    Ultima modifica di Vincent.Zeno; 28-12-2017 a 16:22

  4. #4
    Grazie per le risposte!! La dimensione delle immagini non è un problema, il fatto che ci siano elementi fissi nel mio esempio era solo per mostrare la base di partenza.
    Vincent, avevo visto esempi simili ma quando li applico:
    - le immagini non vengono visualizzate
    - visualizzo in colonna quello che vorrei vedere in riga (in modalità responsive)

    Io invece vorrei:

    Immagine
    Testo
    [spazio]
    Immagine
    Testo
    [spazio]
    Immagine
    Testo
    [spazio]
    ....per 8 volte


    Mi potete aiutare a venirne a capo?

    Grazie infinite!!!
    Iceberg

  5. #5
    Ci fai vedere la tavella originale? Altrimenti qui si va solo a naso!
    Poi se invece di usare una tabella usassi dei div che è anche più opportuno semanticamente, le cose andrebbero meglio
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  6. #6
    Grazie Carlo per la risposta!!

    La mia tabella originale è proprio quella che ho inserito nel primo post.

    Nessun problema da parte mia ad utilizzare i DIV o altro.

    Diciamo che ho postato come è ora la tabella e spiegato come vorrei che venisse visualizzato quel contenuto da mobile.



    codice:
    <table>
            <tbody>
                <tr>
                    <td><imgsrc="img1.png"width="300"height="200"/></td>
                    <td><imgsrc="img2.png"width="300"height="200"/></td>
                    <td><imgsrc="img3.png"width="300"height="200"/></td>
                    <td><imgsrc="img4.png"width="300"height="200"/></td>
                </tr>
                <tr>
                    <td>Text 1</td>
                    <td>Text 2</td>
                    <td>Text 3</td>
                    <td>Text 4</td>
                </tr>
                 <tr>
                    <td><imgsrc="img5.png"width="300"height="200"/></td>
                    <td><imgsrc="img6.png"width="300"height="200"/></td>
                    <td><imgsrc="img7.png"width="300"height="200"/></td>
                    <td><imgsrc="img8.png"width="300"height="200"/></td>
                </tr>
                <tr>
                  <td>Text 5</td>
                  <td>Text 6</td>
                  <td>Text 7</td>
                  <td>Text 8</td>
                </tr>
            </tbody>
        </table>

    Grazie!!!
    Iceberg

  7. #7
    Niente???
    Iceberg

  8. #8
    Prova a fare il tutto con i div
    Ultima modifica di carlomarangoni; 30-12-2017 a 18:44
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  9. #9
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,058
    Ciao, premettendo che con le tabelle puoi farci ben poco sulla questione responsive, se non impostando una tabella "schiacciabile" o scorrevole, oppure a meno di utilizzare stratagemmi come quelli sui link proposti da Vincent.Zeno o altri complicati metodi via JavaScript o, ancora, svariate altre soluzioni che puoi trovare online (vedi ad esempio qui, qua, ecc.), potresti comunque risolvere, forse in modo più opportuno, allestendo una griglia "flessibile" composta da contenitori (ad esempio dei div) come suggerito da carlomarangoni, e come tu stesso hai preso in considerazione.

    Penso infatti che l'uso di una tabella, in questo tuo caso specifico, forse non sia così necessario.

    Potrei provare a buttare giù qualcosa ma ho bisogno di alcuni chiarimenti:

    - I diversi testi nelle celle, riportati su righe alternate, sono relativi alle singole immagini? Cioè sono in sostanza delle didascalie di quelle immagini?

    In tal caso ritengo sia comunque inadeguata l'impostazione che hai usato per quella tabella. Sarebbe stato più opportuno inserire il testo all'interno di ogni <td> relativo all'immagine.

    - Utilizzi HTML 5?

    In tal caso, e in base al primo punto, si potrebbe usare una serie di elementi <figure>, cioè dei contenitori in cui inserire l'elemento <img> e il suo relativo <figurecaption>. In alternativa si potrebbero comunque usare dei semplici div, il discorso non cambia.

    A questo punto sarà possibile organizzare tali contenitori come meglio si crede (ad esempio con float o con flexbox) in modo da ottenere la disposizione voluta, che si posso inoltre organizzare facilmente per la questione responsive.

    Fammi sapere.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  10. #10
    Oltre che usare i div e come suggerito da KillerWorm usare html5 è appunto sbagliato mettere il testo in celle separate inoltre quella tabella non potra mai funzionare in quanto è piena di errori semantici, tutte le espressioni sono attaccate esempio:
    Così non va bene
    codice:
    <td><imgsrc="img4.png"width="300"height="200"/></td>
    Così va bene
    codice:
    <td> <img src="img4.png" width="300" height="200" /> </td>
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

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.