Responsive "table"

Question

Ho una tabella HTML che è troppo ampia per i piccoli schermi. Sto cercando di sbarazzarmi di questo tavolo e utilizzare liste e div per avere un design più reattivo.

Ecco il mio HTML mi si avvicinò con:

<ul> 
    <li class="fixture"> 
     <div class="fixture-date">01/09/2014 20:00</div> 
     <div class="fixture-details"> 
      <div class="home-team">Team A</div> 
      <div class="result">Result</div> 
      <div class="away-team">Team B</div> 
     </div> 
     <ul class="forecasts"> 
      <li class="player-forecast"> 
       <div class="player">Player 1</div> 
       <div class="forecast">Forecast</div> 
       <div class="score">3.0</div> 
      </li> 
      ... 
     </ul> 
    </li> 
    ... 
</ul> 

voglio farlo sembrare come questo su schermi di piccole dimensioni:

---------------------------------------------------- 
| 01/09/2014           | 
|----------------------------------------------------| 
|    Team A | Result | Team B    | 
|----------------------------------------------------| 
| Player 1  | Forecast |    3.0 | 
|----------------------------------------------------| 
| Player 2  | Forecast |    0.0 | 

e come questo su ampi schermi:

            | Player 1 | Player 2 | 
------------------------------------------------------------------------------------| 
| 01/09/2014 |  Team A | Result | Team B  | Forecast | 3.0 | Forecast | 0.0 | 
|-----------------------------------------------------------------------------------| 
| 01/09/2014 |  Team C | Result | Team D  | Forecast | 1.0 | Forecast | 2.0 | 

Ho impostato un violino con quello che ho raggiunto finora: http://jsfiddle.net/vwanr2gx/

Non ho trovato un modo per mettere tutte le "celle" per una fixture sulla stessa riga e mantenere la stessa larghezza per le "celle" nella stessa "colonna". Non riesco a codificare la larghezza delle celle per i team perché non conosco il contenuto (generato dall'utente).

Ho provato a utilizzare le tabelle CSS, ma dal momento che ho div nidificato, crea automaticamente nuove righe (vedi violino).

Come posso ottenerlo (se possibile)?

Answer 1

Non so se hai trovato una soluzione per questa domanda, ma eccone una che ho sviluppato. Questi sono i dettagli:

• Mantenuto il codice HTML (sostituiti alcuni ul/li tag con div, ma probabilmente funzioneranno con le vostre liste solo fare piccoli cambiamenti negli stili), e cambiato il CSS a seconda del supporto larghezza.
• Se è un "grande display", verrà visualizzata solo la prima riga di nomi di giocatori.
• float:left, float:left, float:left ...

si può vedere un esempio di lavoro qui: http://jsfiddle.net/yuL0pvgt/1/. E questo è il codice CSS che ho usato:

* { 
    border-collapse:collapse; 
    margin:0px; 
    padding:0px; 
    font-size:12px; 
} 
#mytable { 
    display:table; 
    width:100%; 
} 
.fixture { 
    display:table-row; 
} 
.fixture-date { 
    display:block; 
} 
.fixture-details { 
    display:block; 
    height:auto; 
    overflow:auto; 
} 
.fixture-details .home-team { 
    float:left; 
    width:40%; 
    text-align:right; 
} 
.fixture-details .result { 
    float:left; 
    width:20%; 
    text-align:center; 
} 
.fixture-details .away-team { 
    float:left; 
    width:40%; 
    text-align:left; 
} 
.forecasts { 
    display:block; 
} 
.forecasts .player-forecast { 
    display:block; 
} 
.forecasts .player-forecast .player { 
    float:left; 
    width:40%; 
    text-align:left; 
} 
.forecasts .player-forecast .forecast { 
    float:left; 
    width:20%; 
    text-align:center; 
} 
.forecasts .player-forecast .score { 
    float:left; 
    width:40%; 
    text-align:right; 
} 
@media all and (min-width: 500px) { 
    .fixture { 
     vertical-align:bottom; 
     height:auto; 
     overflow:auto; 
     width:100%; 
    } 
    .fixture-date { 
     display:inline-block; 
     width:20%; 
     height:auto; 
     overflow:auto; 
    } 
    .fixture-details { 
     display:inline-block; 
     width:35%; 
    } 
    .forecasts { 
     display:inline-block; 
     width:45%; 
     height:auto; 
     overflow:auto; 
    } 
    .forecasts .player-forecast { 
     display:inline-block; 
     float:left; 
     width:33.33%; 
     line-height:auto; 
     overflow:auto; 
    } 
    .forecasts .player-forecast .player { 
     width:100%; 
     text-align:center; 
    } 
    .forecasts .player-forecast .forecast { 
     width:50%; 
    } 
    .forecasts .player-forecast .score { 
     width:50%; 
     text-align:center; 
    } 
    .fixture:not(:first-child) .player { 
     display:none; 
    } 
} 

Era questo il tipo di soluzione che stavi cercando?

Alcune sfide/cose-left-to-do con questa soluzione:

• Fissaggio gli spazi: si può notare che c'è qualche spazio vuoto tra le righe (in senso verticale), questo può essere risolto utilizzando display:inline-block, ma poi dovresti occuparti dello spazio vuoto orizzontalmente (ci sono alcuni post su come risolverlo sullo stackoverflow)
• La soluzione è specifica per 3 giocatori (nota lo .forecasts .player-forecast { width:33.33%; }, questo 33,33% dovrebbe essere modificato a 100/number_of_players per una visualizzazione ottimale).
• Sarà necessario regolare le larghezze in modo che corrispondano alle proprie esigenze.

Answer 2

Ti suggerisco di creare tabelle più intelligenti, non utilizzando il tag, ma utilizzando le proprietà e le classi di visualizzazione di css3. Questo è il mio modo di fare tavoli reattivi.

<div class="table"> 
    <div class="tr"> 
     <div class="td"></div> 
     <div class="td"></div> 
    </div> 
</div> 

Amd tuo css dovrebbe essere simile a questo:

.table { display: table; } 
.tr { display: table-row; } 
.td { display: table-cell; } 

Quindi, in pratica sulla risoluzione si desidera che la tabella di essere 'reattivo' basta dire che volete che il vostro tavolo-cellule (.TD) per essere

.td {display: block; } 

e avrete tutto perfettamente allineato! Ecco la demo dal vivo (imposta la risoluzione su più in alto e guarda tu stesso :) http://jsfiddle.net/Cowwando/2jkm108u/ Saluti!

Answer 3

Questa potrebbe non essere la soluzione che stai cercando, ma se non ti dispiace DIV anziché TABLE, puoi provare a utilizzare flexbox. Questo potrebbe darti qualche spunto: Really Responsive Tables using Flexbox