Create full-width header using table properties

Question

I have multiple spans within a div, with the wrapper displayed as a table and the spans displayed as table cell. Now I would like to have a header appear above the spans without having to nest the spans any further. Here is what I have:

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

If you inspect the "header" it appears to fill the full 100% width but if there is more text or a background color it only expands over the first column.

Is there a way to make it cover all three columns like a real header without nesting the spans further?

score 4 · Accepted Answer · answered Sep 28 '16 at 23:26

4

If u really wanna use table properties for span's u can instead of

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

use

.header { display: table-caption; }

answered Sep 28 '16 at 23:26

liborza

969
1
7
28

Perfect! I think I tried every other table-*, thanks. – DasBeasto Sep 29 '16 at 00:20

score 3 · Answer 2 · edited May 23 '17 at 10:34

In case you're open to an alternative approach, here's a way to build the layout with 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

Notes:

establish flex container with wrap enabled
header consumes all space in the row, forcing siblings to create new row
items sized to allow three per row

Browser support:

Flexbox is supported by all major browsers, except IE < 10.

Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes.

For a quick way to add all the prefixes you need, use Autoprefixer.

More details in this answer.

+1 Due to constraints not mentioned in this question I can't use flex as of yet. It is on the list to covert though so I do appreciate the help for when I do! — DasBeasto, Sep 29 '16 at 00:21

score 0 · Answer 3 · answered Sep 28 '16 at 23:29

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

Johannes · Answer 4 · 2016-09-28T23:47:34.050

0

Use display: table-captionfor .header:

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

edited Sep 28 '16 at 23:47

answered Sep 28 '16 at 23:32

Johannes

64,305
18
73
130

Create full-width header using table properties

4 Answers4

jsFiddle