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>

CSS-Table尽管有中间元素

1 个答案: