TABELLA ELASTICA E RIDIMENSIONAMENTO.
Progetto FREE
Il software incomedia® permette l'inserimento nei progetti di tabelle ma il problema è che non sono responsive quindi bisogna trovare il modo di ridimensionarle con del codice extra.
Lo scopo del progetto è incentrato su una tabella a tre colonne (di defaultl) ma può essere estesa al massimo a 4 perchè nei cellulari bisogna fare delle prove di contenimento testi. Molto dipende da cosa ci andate ad inserire. Se la tabella..... esempio.... deve contenere una tabella millesimale di un condominio, è possibile estenderla anche a più di 4 colonne. Tutto dipende dalle impostazioni che vi servono.
In questo contesto prendiamo come esempio una tabella a tre colonne.
Se sei pronto partiamo con le impostazioni base.
- CREA LA TUA PAGINA TEST
- INSERISCI UNA TABELLA A TRE COLONNE (una volta capito il concetto puoi provare ad ampliare le colonne)
- INSERISCI I TESTI IN TABELLA
- SALVA TUTTO
- VAI AL PASSO 3 PROPRIETA' E POI FAI CLICK SU ESPERTO
- INSERISCI QUESTO CODICE PRIMA DELLA CHIUSURA DEL TAG HEAD
<style> table {word-break:break-word;width:100% !important;} </style> <style> @media (max-width: 800px) { table {word-break:break-word;width:100% !important;} table td {height:auto !important;} table img {max-width:100% !important;max-height:100% !important;} { </style> |
OPPURE
<style> table {word-break: break-word;} </style> <script> $( document ).ready(function() { $("table").css("width", "");}); </script> |
- SALVA TUTTO
- PROVA ORA LA TABELLA. NOTERAI CHE A SCENDERE DI RISOLUZIONE LA TABELLA SI ELASTICIZZA PER CONTENERE I DATI CHE HAI INSERITO. Fai delle prove, stringi o allarga i bordi di tabella, e trova il giusto compromesso anche per i device mobili.
| TEST1 | TEST2 | TEST3 |
| PROVA 1 | PROVA2 | PROVA3 |
TRUCCHI E CONSIGLI
Quando pensi che dovrai avere parecchi dati da inserire invece di mettere i campi in orizzontale metti le voci sulla prima cella della tabella a seguire. Riduci l'ampiezza dei font se necessario
Ecco un esempio:
| Targa | ||
| Cilindrata | ||
| ecc.... | ||
COMMENTA ▼
Non sono presenti ancora recensioni.