Wrap a group of CSS table cells to a new line - html

Question

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?

Answer 1

If you can edit the HTML, just make the structure to like a complete table.
.t {
display: table;
width: 100%;
}
.r {
display: table-row;
}
.c {
display: table-cell;
}
<div class="t">
<div class="r">
<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>
<div class="r">
<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>
</div>

Answer 2

Based on what/how you want them to behave, you can use float, (haven't tested for cross browser support on this one though) but they will not behave as a normal table.
Another option is to use flexbox (will still not behave as a normal table though)
.t {
display: table;
width: 100%;
}
.c {
display: table-cell;
float: left;
width: 20%;
}
<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>

Answer 3

To achieve your expected result, I have used position:relative option and display:table-cell
HTML:
<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>
CSS:
.t {
display: table;
width: 100%;
}
.c {
display: table-cell;
padding: 1%;
border: 1px solid black;
text-align: center;
width: 10%;
}
.c:nth-child(n+6) {
display: table-cell;
position: relative;
left: -50%;
top: 60px;
}
Codepen-http://codepen.io/nagasai/pen/mEOjLL