Wrap lange HTML-Tabellen zur nächsten Zeile

Question

(fand ich this und this aber sie sind über lange Wörter Einwickeln)

Ich habe eine Tabelle wie folgt aus:

<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> 

Ich brauche Spalten zu wickeln, wenn Bildschirm des Benutzers Die Breite ist klein. Ich brauche Spalten zu wickeln und eine Tabelle Ergebnis wie folgt zu erhalten:

Ich habe style = „table-layout: fixed“ aber das machte Tabellenbreite genau 100%, aber die Bilder wurden automatisch auf die Hälfte gestreckt passen Sie sie an die Bildschirmbreite an.

Wie kann ich Spalten zur nächsten Zeile senden?

Answer 1

Was Sie entscheiden müssen, ist, was passiert mit der nächsten Zeile, wenn es zum nächsten fließt. Fügt es eine neue verwaiste Reihe, das heißt:

#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/

Sie werden der Überlauf sehen eine neue Reihe mit dem übrig gebliebenen und leeren Raum auf der rechten Seite wird.

Wenn Sie nur ein "Rollen" blockieren möchten, können Sie:

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

Wo die Zeilen nur in Strömungs blockieren nach unten. Sie könnten <br/> Tags einfügen, um bei Bedarf harte Zeilenumbrüche zu erstellen. Nicht sicher, ob das hilft und nicht über Browser hinweg getestet wurde, aber das ist es, was ich denke, dass Sie daran denken.