CODEWITHSUNDEEP
htmlcsscss-tables
DasBeasto
DasBeasto

Reputation: 2282

Create full-width header using table properties

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:

enter image description here

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

Upvotes: 3

Views: 1784

Answers (4)

Johannes
Johannes

Reputation: 67768

Use display: table-captionfor .header:

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

Upvotes: 0

Michael Benjamin
Michael Benjamin

Reputation: 371231

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:

  1. establish flex container with wrap enabled
  2. header consumes all space in the row, forcing siblings to create new row
  3. 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.

Upvotes: 3

Yuri Pereira
Yuri Pereira

Reputation: 1995

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

Upvotes: 0

liborza
liborza

Reputation: 1009

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

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

use

.header { display: table-caption; }

Upvotes: 4

Related Questions