I've been trying to prevent td to overflow to the right inside tr. Instead I want to break it to new line when its content is growing but keep the whole content in one tr.
I've tried with width property but it doesn't seem to work.
I'm new to css, so I don't really know what else to do.
Since the table has more content in one line than a screen monitor can fit, you might want to enable scrolling.
One option you could try is to enable scrolling for the div.comicstable container.
.comicstable {
overflow-x: auto;
}
Or if you want to handle the scrolling manually using JavaScript, disable the overflow:
.comicstable {
overflow-x: hidden;
}
If you want your content to wrap if they are longer than a screen can display, you could try out the flex-box.
.flexbox {
display: flex;
flex-wrap: wrap;
}
.flexbox > div {
margin: 5px;
}<div class="comicstable">
<div class="flexbox">
<div>
<img src="https://via.placeholder.com/70x100">
</div>
<div>
<img src="https://via.placeholder.com/70x100">
</div>
<div>
<img src="https://via.placeholder.com/70x100">
</div>
<div>
<img src="https://via.placeholder.com/70x100">
</div>
<div>
<img src="https://via.placeholder.com/70x100">
</div>
<div>
<img src="https://via.placeholder.com/70x100">
</div>
<div>
<img src="https://via.placeholder.com/70x100">
</div>
<div>
<img src="https://via.placeholder.com/70x100">
</div>
<div>
<img src="https://via.placeholder.com/70x100">
</div>
<div>
<img src="https://via.placeholder.com/70x100">
</div>
<div>
<img src="https://via.placeholder.com/70x100">
</div>
</div>
</div>See also:
I think easiest in your case is to apply
.comicstable table tr td {
/* ... previous code... */
display: inline-block;
}
That will move TDs to the next line when there's no more width left.
