CSS-Table尽管有中间元素

Question

我们可以使用display：table和friends 将任何元素制作成像codepen这样的表。

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

<div class="table">
  <div class="row">
    <div class="cell">
      Foo
    </div>
    <div class="cell">
      Bar
    </div>
  </div>
  <div class="row">
    <div class="cell">
      Baz
    </div>
    <div class="cell">
      Bang
    </div>
  </div>
</div>

---

但是，如果HTML包含像codepen这样的中间元素，则CSS表样式将不再起作用：

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

<div class="table">
  <div class="between-table-and-row">
    <div class="row">
      <div class="between-row-and-cells">
        <div class="cell">
          Foo
        </div>
        <div class="cell">
          Bar
        </div>
      </div>
    </div>
  </div>
  <div class="between-table-and-row">
    <div class="row">
      <div class="between-row-and-cells">
        <div class="cell">
          Baz
        </div>
        <div class="cell">
          Bang
        </div>
      </div>
    </div>
  </div>
</div>

---

thera仍然可以显示表格，只更改CSS，而不更改HTML吗？

Answer 1

是的，但不受广泛支持（当前仅适用于Firefox）。

您想要的是display: contents：

元素本身不会生成任何框，但是其子元素和伪元素仍会正常生成框。出于框生成和布局的目的，必须将元素视为在文档树中已被其子元素和伪元素替换。

.between-table-and-row, .between-row-and-cells {
  display: contents;
}

.table {
  display: table;
  width: 100%;
}
.between-table-and-row, .between-row-and-cells {
  display: contents;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
}

<div class="table">
  <div class="between-table-and-row">
    <div class="row">
      <div class="between-row-and-cells">
        <div class="cell">Foo</div>
        <div class="cell">Bar</div>
      </div>
    </div>
  </div>
  <div class="between-table-and-row">
    <div class="row">
      <div class="between-row-and-cells">
        <div class="cell">Baz</div>
        <div class="cell">Bang</div>
      </div>
    </div>
  </div>
</div>

但是，特别是对于表，还有一个更好的选择：您可以像显示tbody元素一样显示。

.between-table-and-row {
  display: table-row-group;
}

请注意，这无法解决.between-row-and-cells问题。

.table {
  display: table;
  width: 100%;
}
.between-table-and-row {
  display: table-row-group;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
}

<div class="table">
  <div class="between-table-and-row">
    <div class="row">
      <div class="cell">Foo</div>
      <div class="cell">Bar</div>
    </div>
  </div>
  <div class="between-table-and-row">
    <div class="row">
      <div class="cell">Baz</div>
      <div class="cell">Bang</div>
    </div>
  </div>
</div>

如果列的宽度固定，则还可以考虑

.between-table-and-row {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.row {
  display: table-row-group;
}
.between-row-and-cells {
  display: table-row;
}

.table {
  width: 100%;
}
.between-table-and-row {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.row {
  display: table-row-group;
}
.between-row-and-cells {
  display: table-row;
}
.cell {
  display: table-cell;
}

<div class="table">
  <div class="between-table-and-row">
    <div class="row">
      <div class="between-row-and-cells">
        <div class="cell">Foo</div>
        <div class="cell">Bar</div>
      </div>
    </div>
  </div>
  <div class="between-table-and-row">
    <div class="row">
      <div class="between-row-and-cells">
        <div class="cell">Baz</div>
        <div class="cell">Bang</div>
      </div>
    </div>
  </div>
</div>