Wrap tavoli lungo HTML a riga successiva

Question

(ho trovato this e this ma sono sulla disposizione lunghe parole)

Ho una tabella come questa:

<table id="myTable" width="100%" border="5" style="table-layout:fixed"> 
<tr> 
<td><img src="photo1"></td> 
<td><img src="photo2"></td> 
<td><img src="photo3"></td> 
<td><img src="photo4"></td> 
<td><img src="photo5"></td> 
<td><img src="photo6"></td> 
</tr> 
</table> 

Ho bisogno di avvolgere le colonne se lo schermo dell'utente la larghezza è piccola Ho bisogno di avvolgere le colonne e ottenere un risultato tabella come questa:

ho aggiunto style = "table-layout: fixed" ma questa larghezza tavolo fatto esattamente il 100%, ma le immagini sono state automaticamente allungato a metà per adattarli alla larghezza dello schermo.

Come posso inviare colonne alla riga successiva?

Answer 1

Quello che devi decidere è quale comportamento si verifica con la riga successiva mentre scorre verso il basso. E 'l'aggiunta di una nuova riga orfani, vale a dire:

#container { 
    width: 95%; 
    max-width: 646px; 
    margin: 10px auto; 
    border: 5px solid black; 
    padding: 5px; 
} 
#container .row { 
    border: 1px solid green; 
    border-left: 0; 
    border-top: none; 
    margin: 0; 
    padding: 0; 
} 
#container br { 
    clear: both; 
} 
#container .block { 
    border: 1px solid blue; 
    border-bottom: 0; 
    border-right: 0; 
    float: left; 
    width: 128px; 
} 

<div class="row"> 
    <div class="block"> 
     <img src="http://goo.gl/UohAz"/> 
    </div> 
    <div class="block"> 
     <img src="http://goo.gl/UohAz"/> 
    </div> 
    <div class="block"> 
     <img src="http://goo.gl/UohAz"/> 
    </div> 
    <div class="block"> 
     <img src="http://goo.gl/UohAz"/> 
    </div> 
    <div class="block"> 
     <img src="http://goo.gl/UohAz"/> 
    </div> 
    <br/> 
</div> 

http://jsfiddle.net/userdude/KFFgf/

vedrete il troppo pieno diventa una nuova riga con il residuo e lo spazio vuoto sulla destra.

Se si desidera solo un blocco di "rolling", è possibile:

http://jsfiddle.net/userdude/KFFgf/1/

Dove le righe solo isolato di flusso. È possibile inserire tag <br/> per creare interruzioni di riga rigide, se necessario. Non sono sicuro se ciò sia di aiuto e non sia stato testato su tutti i browser, ma è quello che penso che tu abbia in mente.