table-header-group的正确排列是怎样的？

Question

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

我想对内容栏使用 display: table-cell，并且认为我需要对标题栏使用 display: table-header-group。

在研究 display: table-header-group 时，我根本找不到任何文档如何使用此 CSS 属性。 W3Cschools 说了以下内容。

table-header-group: Let the element behave like a thead element. (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

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

table-header-group的正确排列是怎样的？

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

css

css-tables