table-header-group的正确安排是什么？

Question

我正在尝试构建一个包含两个标题列和三个内容列的页脚。

我希望将display: table-cell用于内容列，并且相信我需要使用display: table-header-group作为标题列。

在研究display: table-header-group时，我找不到任何关于如何使用此CSS属性的文档 。 W3Cschools说如下。

  

table-header-group：让元素表现得像thead元素。   (source)

遗憾的是，我没有告诉我应该如何安排divs

到目前为止，我已经获得了以下代码，但我不确定我是否正确使用table-header-group

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

如果有人对table-header-group有任何经验并且可以对此有所了解，我将非常感激。

Answer 1

我没有任何相关经验，但逻辑规定您只能一个 thead，因此您只能拥有一个table-header-group

所以你的结构应该看起来更像这样：

JSfiddle Demo Backup Link

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;