Currently, I am exploring CSS properties to create the visual appearance of a table using two levels of DOM elements. The highest-level element wraps around its child elements, which are styled to resemble a flat list. For example:
<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 am attempting to arrange this list into two rows, each containing five elements. My current CSS code is as follows:
.t {
display: table;
width: 100%;
}
.c {
display: table-cell;
}
.c:nth-child(5n + 1):after {
content: '-';
display: table-row;
}
Unfortunately, this approach is not yielding the desired outcome.
Is there a method to maintain the two levels of nesting while achieving a table-like layout for the list?