How to "clear" a CSS fake table row?

For several reasons I have to fake a table for displaying images. I want to display several rows with 5 images in each row. So I have to "clear" (I know it's not the right word) before every 6th image to start a new row.

This is the gallery:

<div class="table">
<div class="tr">
    <div class="td">
        <img src="img/logo-1.jpg" alt="">
    </div>
    <div class="td">
        <img src="img/logo-2.jpg" alt="">
    </div>
    <div class="td">
        <img src="img/logo-3.jpg" alt="">
    </div>
    <div class="td">
        <img src="img/logo-4.jpg" alt="">
    </div>
    <div class="td">
        <img src="img/logo-5.jpg" alt="">
    </div>
    <!-- i have to start a new row here ... -->
    <div class="td">
        <img src="img/logo-6.jpg" alt="">
    </div>
    <div class="td">
        <img src="img/logo-7.jpg" alt="">
    </div>
</div>
</div>

And this is how i am trying to "clear" before the 6th row:

.td:nth-child(5n+6):before {
    display: block;
    content: "new line please";
}

Any idea how to get this working?

Solution

Just put this code in your css and it will work fine.

.td{
    display:inline;
}

Note I have replaced your img tags with a tags. As I didn't have tons of images. You can use img too without any problem.

Here is the jsfiddle http://jsfiddle.net/kvkr95sy/