Problema Tabella 
Autore: Alberto Maria C.Ciao a tutti, sto costruendo il sito aziendale, e nella sezione informativa sui corsi online che vendiamo, ho inserito una tabella a 7 colonne in cui c'è nome del corso, la descrizione, i crediti e i pulsanti con i programmi dei corsi e una richiesta informazioni (non c'è e-commerce con vendita diretta).
Dal PC non ho problemi, ci piace come si vede, ordinato e pulito e per noi è ok.
I problemi sorgono con le altre versioni (tablet e cellulare) dove la tabella funziona con lo scroll orizzontale, e questa cosa non ci piace. Parlando con KolAsim ci ha fornito il codice della sua esclusiva invenzione, che ci ha subito sistemato la questione su tablet.
Su cellulare però niente da fare, non mi viene visualizzata la tabella, credo perchè 7 colonne son troppe.
Mi è venuto in mente quindi di fare, per la versione cellulare, una cosa più soft (anche per il cliente credo sia giusto non affollare di informazioni da cellulare), e di far apparire soltanto 3 colonne (nome corso, crediti e pulsante richiedi)...ma come si fa??? Q
Qualcuno mi può aiutare?
O magari anche suggerire qualche altra soluzione???
Ecco il link al sito (ancora non pubblicato per tutti): https://www.paideiacf.it/test/ecm-oss-osa-aos.html
Ti potrei suggerire il solito codice offerto dal gentilissimo KolAsim, vedi al link sotto una dimostrazione
https://toolsshop.altervista.org/DarkPub/menu.html
Autore
Visto, però vedo due colonne, andrebbe bene anche con il mio problema?
... valutando il tuo LINK, per la cui tabella il programma c'entra poco, praticamente potresti risolvere semplicemente con il mio codice che ti avevo anticipato nell'altro Topic, che nelle ultime versioni del programma può essere semplificato; ...prova con questo:
<style> table {width:100% !important; word-break: break-word !important;} </style>
... ti basta incollare il codice in questa sezione nelle Proprietà di quella Pagina:
>> Passo 3 - Mappa > Finestra 'Proprietà Pagina' >Le opzioni della Sezione Esperto >
>.▪Codice personalizzato: > 3^opzione > Prima della chiusura del tag HEAD
... prova e fai sapere del risultato...
-------------------------------------
... volendo, e/o in più, con altra mia invenzione, si potrebbe far aprire la sola tabella in una finestra PopUp "elastica" a parte...
.
ciao
Autore
Grazie mille per la risposta, ho usato i codici di cui prima, mi sono accorto che avevo rimosso dalla visualizzazione l'intera riga in responsive per cellulari...ecco perchè non mi appariva.
Ora ho sistemato ed effettivamente la tabella è stata ridimensionata, però il risultato finale non mi aggrada tanto.
Sarebbe impossibile invece realizzare quell'altra idea che avevo in mente?
E cioè che per la versione cellulare non si visualizzino alcune di quelle colonne???
... OK ... ho visto, funziona...
... quali colonne non vorresti vedere nel cellulare...?...
.
.
Io qualche annetto fa, su questa pagina che posto alla fine, ho inserito un codice per le tabelle che fa ridurre anche al dimensione dei testi sotto una certa risoluzione e fa ridurre eventuali immagini inserite al loro interno... Senza quel codice poi si vedrebbe il tutto "allungato" come si vede nel tuo esempio del post di apertura.
Il mio è questo:
https://www.jiscs.it/corsi/calendario.html
Autore
Vorrei eliminare la seconda e la terza colonna
Autore
Buona idea quella di ridimensionare il testo.
Quando parli del mio post di apertura, di cosa parli nello specifico? Magari ci sono altri errori che non vedo...
... cioè, le colonne: Descrizione -|- Ente/Ordine ...?...
.
Autore
Esatto, quelle due colonne da cellulare le tolgo, poi se vogliono cliccano sul programma e leggono meglio il tutto
Mi riferivo a questa visualizzazione della tabella. Vedi testi "Crediti", "Durata"
... la possibilità di poter ridurre il p.font è anche nei miei codici storici che ti avevo annunciato, ma nel tuo caso sarebbe minimale rispetto al testo voluminoso della seconda colonna, e come ti ho detto prima per questo tipo di tabelle il programma c'entra poco...
... tornando alla richiesta di poter eliminare le due colonne (2^/3^), con questo mio codice le due colonne verranno eliminate sotto ai 720px:
<style>
@media (max-width: 719px) {table th:nth-child(2),table td:nth-child(2),
table th:nth-child(3),table td:nth-child(3) {display: none!important}}
</style>
...
... nel caso di più tabelle nella stessa pagina e/o con caratteristiche diverse, il codice andrebbe rivisto...
.
ciao
.
... ho visto, funziona come da aspettative...
... se per caso ti interessasse l'altra mia invenzione, quella del DIV_SINO, apri un nuovo Topic e ci rivedremo di là...
.
ciao
.
Autore
Giuseppe mi aiuteresti con la riduzione dei testi???
se vuoi essere aiutato devi riaprire il post...
... questo Argomento lo hai chiuso...
... per ottenere risposte da altri, o riabiliti questo Argomento, oppure ne apri uno nuovo a Tema...
... comunque se ti interessa, come ti avevo detto il p.font fa parte dei miei codici storici...
... per esempio per applicare il .font 14 nel mio codice, con in più anche l'aggiustamento delle celle, diventerebbe così:
<style>
@media (max-width: 719px) {
table *{font-size:14px!important;height:auto!important;line-height:18px!important}
table th:nth-child(2),table td:nth-child(2),
table th:nth-child(3),table td:nth-child(3) {display: none!important}}
</style>
.
ciao
.