title: What is the proper arrangement for table-header-group?
body: <p>I'm trying to build a footer that has two title columns and three content columns.</p>
  
  <p>I'd like to use <code>display: table-cell</code> for the content columns, and believe I need to use <code>display: table-header-group</code> for the title columns.</p>
  
  <p><img src="https://i.stack.imgur.com/VFJkL.png" alt=""></p>
  
  <p>While researching <code>display: table-header-group</code>, I could not find any documentation <em>at all</em> on how to use this CSS property. W3Cschools says the following.</p>
  
  <blockquote>
    <p>table-header-group: Let the element behave like a <code>thead</code> element.
    <a href="http://www.w3schools.com/cssref/pr_class_display.asp" rel="nofollow noreferrer">(source)</a></p>
  </blockquote>
  
  <p>That unfortunately doesn't tell me how I should arrange my <code>divs</code></p>
  
  <p>So far I've got the following code, but I'm not sure if I'm using <code>table-header-group</code> correctly</p>
  
  <pre><code>.footer {
      display: table;
  }
  
  .footer-box {
      display: table-cell;
  }
  
  .footer-title-box {
      display: table-header-group;
  }    
  
  &lt;div class="footer"&gt;
     &lt;div class="footer-title-box"&gt;
        Title
     &lt;/div&gt;
     &lt;div class="footer-title-box"&gt;
        Title
     &lt;/div&gt;
     &lt;div class="footer-box"&gt;
        Content
     &lt;/div&gt;
     &lt;div class="footer-box"&gt;
        Content
     &lt;/div&gt;
     &lt;div class="footer-box"&gt;
        Content
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If anyone has any experience with <code>table-header-group</code> and could shed some light on it, I would be incredibly grateful.</p>