html - 将一组 CSS 表格单元格换行

Question

我正在试验一组两级 DOM 元素的 CSS 属性，以使其看起来像一个表格。最顶层的元素只是一个，它包裹着它的子元素，这些子元素又形成了一个相似元素的平面列表。像这样:

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

我试图让这个列表形成两行，每行包含 5 个元素。所以我使用的 CSS 是这样的:

.t {
  display: table;
  width: 100%;
}
.c {
  display: table-cell;
}
.c:nth-child(5n + 1):after {
  content: '-';
  display: table-row;
}

这是行不通的。

有没有办法在保留两层嵌套的同时让列表看起来像表格一样？

Answer 1

如果您可以编辑 HTML，只需将结构制作成一个完整的表格即可。

.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>