Problema adattamento tabella HTML

[Prill]

L'inconveniente che noti a risoluzioni molto basse dipende dal testo, il suo disporsi su più righe dove è più lungo crea uno spostamento nell'allineamento verticale, il che può esser risolto dando ad h6 un'altezza tale da contenere due righe. Per evitare invece che il testo produca un diverso ridimensionamento delle celle in larghezza (e conseguentemente delle immagini)puoi dare ad h6 una larghezza minima pari alla larghezza della parola più lunga ( che mi pare sia Programmazione), in questa maniera anche le celle con testo più corto non si restringeranno al di sotto di quella misura e le immagini resteranno eguali. La larghezza minima delle tre celle sommte sarà anche la larghezza minima del box contenitore. Altrimrnti per dispositi mobili dovremo impostare css diversi con le media queries

[Prill]

Puoi aggiungere al tuo css questa regola:

@media (min-width: 320px) and (max-width: 756px) { 
#myTable td h6{
    width:120px;
    height:45px;
}
 }

Al suo interno potrai aggiungere altre formattazioni, anche per il contenitore della tabella. Sulle media queries puoi vedere la guida di html.it e ulteriori esempi e informazioni ricercando su google

[RichiFra03]

Ok,grazie 1000 ma, scusandomi per l'ignoranza, non ho capito cosa devo fare... In pratoca devo aggiungere ad ogni cella i codici che mo hai postato sotto il tag src? Grazie infinite davvero

[Prill]

no, è una regola da inserire nel foglio di stile e che imposta quando la finestra ha dimensioni da 320 pixel a 756 (756 è la misura sotto la quale attualmente, per via del testo, le celle si ridimensionano in proporzioni non eguali) per h6 una larghezza precisa.
Invece che al testo avrei potuto assegnare la larghezza anche al div o alla cella, non l'ho fatto per evitare di calcolare padding eccetera .

Quando si lavora con dimensioni in percentuale bisogna sempre fare i conti con i contenuti. Se ho un testo con una parola molto lunga la cella interessata a risoluzioni basse supererà il 33% e il rimanente spazio sarà, a seconda dei browser, ripartito fra le altre celle che quindi non saranno eguali. Dovrò perciò lavorare con larghezze o larghezze minime fisse. E questo vale non solo per la tabella ma anche per i suoi contenitori.

Con gli esempi dati hai delle indicazioni da seguire, potrai e dovrai sicuramente modificare dell'altro se vorrai una pagina che si adatti perfettamente anche agli smartphone

[RichiFra03]

Grazie infinite. Ho aggiunto al mio css i codici che hai postato. Ora le dimensioni delle immagini sono uguali, ma la tabella continua ad uscire dalla pagina(per ovvie ragioni). Come dici tu dovrò lavorare e modificare dell'altro. Ora vedo cosa riesco a fare. Grazie!

[RichiFra03]

stavo pensando, dato che per un blog di informatica mi sembra che non stia bene un tema responsive come il mio, è possibile eliminare questa funzione? Cercando su internet ho letto che dipende da tema a tema e bisogna rivolgersi al forum del tema steso. Pensavo di togliere il responsive anche perchè, andando sul mio sito, anche solo rimpicciolendo la finestra del browser diventa come su telefoni (come nello screenshot)
schermo.jpg

[RichiFra03]

Eliminando responsive, quindi, la risoluzione del problema è piu semplice o rimane invariata su risoluzioni basse? Grazie 1000

[Prill]

Scusa se rispondo in ritardo. Non è necessario che tu vada a cambiare sostanzialmente il tuo tema.
Modificarlo significherebbe andare a togliere le dimensioni in percentuale e impostarne di fisse. Il che comporterebbe a risoluzioni basse di dover scrollare molto orizzontalmente. Oppure di dover impostare dimensioni fisse diverse a seconda della risoluzione per rendere il tuo sito facilmente navigabile con tutti i dispositivi. Se questa però è per te la soluzione più semplice, provala, magari ricostruendoti una pagina semplificata da usare per i test

Restando così, stabilito che a risoluzioni minori di 768 pixel la tabella occupi una larghezza pari a tot (larghezza dei suoi contenuti, che con i padding vari dovrebbe essere di 380px), basterà impostare con le media queries, seguendo l'esempio di sopra, una larghezza di 380px sul div che contiene la tabella.
E verificare cosa accade e riaggiustare risalendo fino al primo contenitore. Non è difficile, devi solo provarci entrando di più nei meccanismi di funzionamento dei css, di cui una conocenza bisogna avere ma che si imparano soprattutto provando

[RichiFra03]

Grazie 1000 Prill, e scusa se scrivo anche io in ritardo(stavo prendendo l'aereo x tornare dalle vacanze )... Ora studio i codici e cerco un su internet approfondimenti sull'argomento... In effetti è vero che si ompara provando! Provo a scrivere qualche codice... Se ho sei problemi ti faccio sapere!

[RichiFra03]

Eccomi, scusa se ci ho messo molto, ma in questi tempi ho avuto poco tempo.
Non sapendo da dove iniziare a scrivere codici, nonostante aver letto su vari siti internet e degli articoli e guide varie, ho trovato questa guida, che spiega come rendere responsive una tabella html: http://css-tricks.com/responsive-data-tables/
Ma il risultato non è proprio quello previsto... Quei codici infatti mettono tutte le colonne in righe(vedi esempio x capire meglio: http://css-tricks.com/examples/Respo...responsive.php).
Come faccio a fare in modo che sul telefono si veda come sul computer? Cioè che la tabella si rimpicciolisca in base alle dimensioni dello schermo in uso, che regoli le dimensioni quindi delle celle, della font e delle immagini(come nella riproduzione che ho fatto, in foto)? Grazie infinite, davvero.