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，只需使结构像一个完整的表格。

＆＃13;

.t {
  display: table;
  width: 100%;
}
.r {
  display: table-row;
}
.c {
  display: table-cell;
}

＆＃13;

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

＆＃13;

Answer 2

根据您希望他们的行为方式，您可以使用float，（虽然没有测试过这一点的跨浏览器支持），但它们的行为不会正常table 。

另一个选择是使用flexbox（但仍然不会像普通table那样行事）

.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

为了达到预期的效果，我使用了position：relative选项并显示：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

将一组CSS表格单元格换行到新行

3 个答案: