html - 使用表格属性创建全 Angular 标题

Question

我在一个 div 中有多个跨度，包装器显示为表格，跨度显示为表格单元格。现在我想让标题出现在跨度上方，而不必进一步嵌套跨度。这是我所拥有的:

.wrap {
  width: 300px;
  display: table;
}
.header {
  display: table-header-group;
}
.first {
  display: table-cell;
  background: red;
  padding: 10px;
}
.second {
  display: table-cell;
  background: green;
  padding: 10px;
}
.third {
  display: table-cell;
  background: blue;
  padding: 10px;
}

<div class="wrap">
  <span class="header">Header</span>
  <span class="first">First</span>
  <span class="second">Second</span>
  <span class="third">Third</span>
</div>

https://jsfiddle.net/kn8b20p3/

如果您检查“标题”，它似乎会填充整个 100% 宽度，但如果有更多文本或背景颜色，它只会扩展到第一列。

有没有办法让它像真正的标题一样覆盖所有三列，而无需进一步嵌套跨度？

Answer 1

如果你真的想为跨度使用表属性，你可以代替

.header { display: table-header-group; }

使用

.header { display: table-caption; }