Mi spiace, ma penso che in quel modo tu ottenga un CSS alquanto ridondante e che comunque non può funzionare
Esattamente ciò che cercavo di spiegare nel precedente post... ma io stesso ho fatto fatica a capirmiil difficile però adesso è dire al prossimo blocco che sarebbe la colonna (4) "dalle" di andare a capo DOPO la colonna (3) LUNEDI (con un float:left?)
Ciò che comanda sono le righe e, solo dopo, le colonne (formate dalle singole celle dentro le righe).La struttura della tabella vede la riga come contenitore in cui sono presenti le celle - tali celle (relativamente alla serie di righe dell'intera tabella) formano solo idealmente le colonne - per cui, frammentare la tabella in gruppi di colonne, per essere incolonnati a loro volta, non è fattibile in modo semplice
In altre parole, dal momento che i <td> (che formano le colonne) stanno dentro i <tr> (le righe), non è sostanzialmente possibile dirgli di "rompere" i relativi <tr> a partire da un dato <td> per fare in modo che tale <td>, e tutto ciò che lo segue, si posizioni dopo quella che sarà (man mano) la fine della totalità dei <tr>...mi sa che ho peggiorato.
Ad ogni modo, il mio consiglio è quello di rivalutare la struttura stessa della tabella in modo tale da poter identificare "fisicamente" i gruppi di colonne che vuoi riposizionare.
Ho fatto varie prove e sono arrivato a questa soluzione (qui il Pen di esempio):
Come puoi vedere nel codice HTML ho "raggruppato" preventivamente le relative 3 colonne per ogni giorno. In pratica è come se avessi "invertito" la priorità tra colonne e righe (o meglio, tra i gruppi di colonne e le righe).codice HTML:<!DOCTYPE HTML> <html lang="it"> <head> <title>Esempio</title> <style> body { text-align: center; font-family: sans-serif; } .rtable { display: inline-table; border-collapse: collapse; } .rtable th, .rtable td { padding: 8px 12px; border: 1px solid #000; } .rtable th { color: #fad430; background: #0e2071; } .rtable td:nth-child(-n+2) { color: #fbe16b; background: #51649c; } .rtable th:nth-child(3) { text-transform: uppercase; } @media only screen and (min-width: 600px) { .rtable { display: flex; flex-wrap: wrap; justify-content: center; } .rtable tbody { margin-bottom: 2px; box-shadow: 2px 1px 3px -1px #000; } .rtable th:last-child, .rtable td:last-child { border-right: 0; } } </style> </head> <body> <h1> Lorem ipsum dolor sit amet </h1> <p> Morbi venenatis nibh sit amet mi elementum semper. </p> <table class="rtable"> <tbody> <tr><th>dalle<th>alle<th>Lunedì</tr> <tr><td>08:00<td>09:00<td>programma01</tr> <tr><td>09:00<td>10:00<td>programma02</tr> <tr><td>10:00<td>11:00<td>programma03</tr> </tbody> <tbody> <tr><th>dalle<th>alle<th>Martedì</tr> <tr><td>08:00<td>09:00<td>programma01</tr> <tr><td>09:00<td>10:00<td>programma02</tr> <tr><td>10:00<td>11:00<td>programma03</tr> </tbody> <tbody> <tr><th>dalle<th>alle<th>Mercoledì</tr> <tr><td>08:00<td>09:00<td>programma01</tr> <tr><td>09:00<td>10:00<td>programma02</tr> <tr><td>10:00<td>11:00<td>programma03</tr> </tbody> <tbody> <tr><th>dalle<th>alle<th>Giovedì</tr> <tr><td>08:00<td>09:00<td>programma01</tr> <tr><td>09:00<td>10:00<td>programma02</tr> <tr><td>10:00<td>11:00<td>programma03</tr> </tbody> <tbody> <tr><th>dalle<th>alle<th>Venerdì</tr> <tr><td>08:00<td>09:00<td>programma01</tr> <tr><td>09:00<td>10:00<td>programma02</tr> <tr><td>10:00<td>11:00<td>programma03</tr> </tbody> <tbody> <tr><th>dalle<th>alle<th>Sabato</tr> <tr><td>08:00<td>09:00<td>programma01</tr> <tr><td>09:00<td>10:00<td>programma02</tr> <tr><td>10:00<td>11:00<td>programma03</tr> </tbody> <tbody> <tr><th>dalle<th>alle<th>Domenica</tr> <tr><td>08:00<td>09:00<td>programma01</tr> <tr><td>09:00<td>10:00<td>programma02</tr> <tr><td>10:00<td>11:00<td>programma03</tr> </tbody> </table> </body> </html>
Nel precedente post ti ho suggerito di suddividere la tabella in più sotto tabelle; sostanzialmente è ciò che ho fatto qui ma, anziché usare più tabelle, ho usato il tag <tbody> (è consentito infatti avere più tbody dentro una stessa table) per creare dei contenitori di righe all'interno della stessa tabella.
In questo modo, ogni <tbody> identifica implicitamente un gruppo di colonne, per cui sarà possibile "manovrarlo" attraverso il CSS.
L'impostazione del CSS è volutamente "Mobile First" per cui di default avrai la tabella disposta esattamente così come è rappresentata dal codice HTML: ogni gruppo (<tbody>) risulta impilato uno sull'altro. Nella media query (impostata con min-width:600px) si va a "mettere in riga" i tbody attraverso l'uso di flexbox.
Questo è quanto. Il resto delle regole sono giusto degli accorgimenti per abbellire la presentazione.
Sta ora a te impostare la costruzione della tabella per ottenere tale struttura.
Magari fai qualche prova e fai sapere.
Buona serata![]()



mi sa che ho peggiorato.

Rispondi quotando