Wrap 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;

  &: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?