Search code examples
csscss-tables

What is the proper arrangement for table-header-group?

I'm trying to build a footer that has two title columns and three content columns.

I'd like to use display: table-cell for the content columns, and believe I need to use display: table-header-group for the title columns.

While researching display: table-header-group, I could not find any documentation at all on how to use this CSS property. W3Cschools says the following.

table-header-group: Let the element behave like a thead element. (source)

That unfortunately doesn't tell me how I should arrange my divs

So far I've got the following code, but I'm not sure if I'm using table-header-group correctly

.footer {
    display: table;
}

.footer-box {
    display: table-cell;
}

.footer-title-box {
    display: table-header-group;
}    

<div class="footer">
   <div class="footer-title-box">
      Title
   </div>
   <div class="footer-title-box">
      Title
   </div>
   <div class="footer-box">
      Content
   </div>
   <div class="footer-box">
      Content
   </div>
   <div class="footer-box">
      Content
   </div>
</div>

If anyone has any experience with table-header-group and could shed some light on it, I would be incredibly grateful.

Solution

  • I don't have any experience with it but logic dictates that you can only have one thead so you can only have one table-header-group

    So your structure should, perhaps, look more like this:

    JSfiddle Demo Backup Link

    .footer {
  display: table;
  width: 50%;
  table-layout: fixed;
}

.footer-title-box {
  display: table-header-group;
  font-weight: bold;
}

.footer-row-box {
  display: table-row-group;
}

.footer-box {
  display: table-cell;
  text-align: center;
}
    <div class="footer">
  <div class="footer-title-box">
    <div class="footer-box">Title</div>
    <div class="footer-box caption">Title</div>
  </div>
  
  <div class="footer-row-box">
    <div class="footer-box">Content</div>
    <div class="footer-box">Content</div>
    <div class="footer-box">Content</div>
  </div>
  
  <div class="footer-row-box">
    <div class="footer-box">Content</div>
    <div class="footer-box">Content</div>
    <div class="footer-box">Content</div>
  </div>
  
  <div class="footer-row-box">
    <div class="footer-box">Content</div>
    <div class="footer-box">Content</div>
    <div class="footer-box">Content</div>
  </div>
</div>