m.vicovanu Posted April 16, 2017 Share Posted April 16, 2017 Buongiorno a tutti, ho creato una tabella con l'editor CMS e avrei la necessità di renderla responsive in modo che si adatti a tutti gli screen in base alla loro risoluzione. Al momento dal cellulare la tabella non viene inquadrata tutta e sul desktop la visibilità cambia in base al browser. Gentilmente chiedo il vostro consiglio su come modificare il codice. Grazie Il link per la tabella è il seguente: http://ilmulinoarredi.it/content/1-campionario-2xl-cleaf Link to comment Share on other sites More sharing options...
fedesib Posted April 19, 2017 Share Posted April 19, 2017 Ciao, ho dato un'occhiata al link che hai segnalato e il problema mi sembra dovuto al fatto che le tabelle hanno larghezza fissa 900px. Nel codice HTML si legge proprio <table style="height:23px;" width="900"> Magari prova ad usare una percentuale width="100%" per esempio, la modifica dovrebbe rendere "fluida" la tabella. Tieni conto comunque che le tabelle completamente responsive sono molto complicate da sviluppare, ti lascio un link ad un articolo in cui l'argomento è stato variamente esplorato (magari ti può dare qualche dritta): https://css-tricks.com/responsive-data-table-roundup/ Buon pomeriggio, Federica Link to comment Share on other sites More sharing options...
m.vicovanu Posted April 19, 2017 Author Share Posted April 19, 2017 Buongiorno Federica, ti ringrazio per la risposta. Ho seguito il tuo consiglio ma vedo che sullo smartphone la tabella crea problemi lo stesso in quanto non carica le immagini nella prima parte, e nella parte dei Legni l'immagine è troppo piccola. Non ne vengo più a capo Link to comment Share on other sites More sharing options...
fedesib Posted April 19, 2017 Share Posted April 19, 2017 Ciao, da quello che vedo ora anche le immagini hanno una height ed una width fissa <img src="http://ilmulinoarredi.it/img/cms/your.jpg" alt="" height="136" width="500"> io suggerisco di mettere altezza al 100% (e togliere height: auto #cms #center_column img in cms.css), poi potresti dare una larghezza (sempre in percentuale) alla colonna che contiene il testo, usando una classe ed aggiungendo la regola specifica sempre in cms.css. Per esempio: <td class="text-col">Your text</td> e poi nel css qualcosa come: td.text-col { width: 25%; } Insomma, il primo passo per avere una tabella responsive (o quasi) è liberarsi di tutte le dimensioni fisse in px, poi se serve si possono fare vari aggiustamenti anche usando le media queries per essere più precisi nell'individuare i break points dei vari dispositivi. Ciao, Federica Link to comment Share on other sites More sharing options...
m.vicovanu Posted April 20, 2017 Author Share Posted April 20, 2017 Ciao Federica, sto creando una nuova tabella grazie alle dritte del link sopra indicato. Ti seguito l'inizio del codice per farti capire cosa sto facendo, solo che sono molto lenta in quanto non sono cosi brava con le tabelle. Potrebbe andare bene cosi? Poi dovrò inserire i files script.js e style.css in css.cms? Per adesso vado avanti con la tabella, poi ti farò sapere. <!DOCTYPE html><html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <table class="responsive-table"> <thead > <tr > <h3><span style="text-decoration: underline;">TINTE UNITE</span></h3> <th>Nome</th> <th>Immagine</th> <th >Nome</th> <th>Immagine</th> </tr> </thead> <tbody > <tr > <td >FA41 - DELAVE' - AZIMUT</td> <td><img src="http://ilmulinoarredi.it/img/cms/Fa41-Delav%C3%A8-Azimut.jpg" alt="" height="100%" width="100%" /></td> <td >UA99 - GRIGIO - SCULTURA</td> <td><img src="http://ilmulinoarredi.it/img/cms/8-UA99-GRIGIO-.jpg" alt="" height="100%" width="100%" /></td> </tr> </tbody> </table> <script src="script.js"></script> </body></html> Grazie e buona giornata Link to comment Share on other sites More sharing options...
m.vicovanu Posted April 28, 2017 Author Share Posted April 28, 2017 Ciao a tutti, ho rifatto la tabella che sul desktop risulta ok, si adatta in base alla dimensione. Sul cellulare invece si vede solo la prima colonna con nome e texture ed il nome della seconda colonna. Ho provato ad inserire il file JS in theme-Js e theme- Js-Autolod ed il file css in theme-Css-Autoload ma non vedo alcun cambiamento tranne che per lo stile che mi interessa poco in questo momento. Qualcuno ha sugerimenti? Allego i files creati. Grazie index.html style.css Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now