css - Wrap long HTML tables to next line

Question

(I found this and this but they are about wrapping long words)

I have a table like this:

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

I need to wrap columns if user's screen width is small. I need to wrap columns and obtain a table result like this:

I added style="table-layout:fixed" but this made table width exactly 100%, but images were automatically stretched to half to fit them to screen width.

How can I send columns to next line?

Answer 1

What you need to decide is what behavior happens with the next row as it flows down to the next. Is it adding a new orphaned row, ie:

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

You'll see the overflow becomes a new row with the leftover and blank space on the right.

If you just want a "rolling" block, you can:

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

Where the rows just block down in flow. You could put <br/> tags in there to create hard row breaks if necessary. Not sure if that helps and haven't tested across browsers, but that's what I think you have in mind.