使用表属性创建全宽标题

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

Answer 2

如果您对其他方法持开放态度，可以使用CSS flexbox构建布局。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

jsFiddle

注意：

1. 建立启用了包裹的Flex容器
2. 标题占用行中的所有空格，强制兄弟姐妹创建新行
3. 项目大小允许每行三个

浏览器支持：

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

最近的一些浏览器版本，例如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

display: table-caption使用.header：

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