Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Html Table

Wrap Long Html Tables To Next Line

Post a Comment
(I found this and this but they are about wrapping long words) I have a table like this: &l

Solution 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;
}

<divclass="row"><divclass="block"><imgsrc="http://goo.gl/UohAz"/></div><divclass="block"><imgsrc="http://goo.gl/UohAz"/></div><divclass="block"><imgsrc="http://goo.gl/UohAz"/></div><divclass="block"><imgsrc="http://goo.gl/UohAz"/></div><divclass="block"><imgsrc="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.

Post a Comment for "Wrap Long Html Tables To Next Line"

Menu Halaman Statis

© 2022 - Code Html5