Wrap a group of CSS table cells to a new line

I'm experimenting with CSS properties of a two-level set of DOM elements to make it appear like it's a table. The topmost element is just one, it wraps its children, which, in turn, form a flat list of lookalike elements. Like this: <div class="t"> <div class="c">First row</div> <div class="c">2</div> <div class="c">3</div> <div class="c">4</div> <div class="c">5</div> <div class="c">Second row</div> <div class="c">7</div> <div class="c">8</div> <div class="c">9</div> <div class="c">0</div> </div> I'm trying to make this list form two rows, each containing 5 elements. So the CSS I'm using is like: .t { display: table; width: 100%; } .c { display: table-cell; } .c:nth-child(5n + 1):after { content: '-'; display: table-row; } Which isn't working. Is there a way to keep two levels of nesting and still have a list that appears as if it was a table?