使用 table 属性创建 full-width header

Question

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

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

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

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

Answer 1

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

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

使用

.header { display: table-caption; }

Answer 2

如果您愿意接受另一种方法，这里有一种使用 CSS flexbox 构建布局的方法。

.wrap {
  width: 300px;
  display: flex;                    /* 1 */
  flex-wrap: wrap;                  /* 1 */
}
.header {
  flex: 0 0 100%;                   /* 2 */
  background-color: lightgray;
}
.first {
  flex: 1 0 33.33%;                 /* 3 */
  background: orangered;
}
.second {
  flex: 1 0 33.33%;                 /* 3 */
  background: lightgreen;
}
.third {
  flex: 1 0 33.33%;                 /* 3 */
  background: aqua;
}
.wrap > * {
  padding: 10px;
  box-sizing: border-box;
}

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

jsFiddle

备注：

建立启用包装的弹性容器
header 消耗了行中的所有 space，迫使兄弟姐妹创建新行
项目大小允许每行三个

浏览器支持：

所有主流浏览器都支持 Flexbox，except IE < 10。

一些最新的浏览器版本，例如 Safari 8 和 IE10，需要 vendor prefixes。

要快速添加所需的所有前缀，请使用 Autoprefixer。

this answer 中有更多详细信息。

Answer 3

https://jsfiddle.net/kn8b20p3/

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

Answer 4

对 .header 使用 display: table-caption:

https://jsfiddle.net/cvwy8peo/2/

使用 table 属性创建 full-width header

Create full-width header using table properties

html

css

css-tables

jsFiddle