代码之家 › 专栏 › 技术社区 › alex

表头组的正确排列方式是什么?

css-tables css

alex · 技术社区 · 11 年前

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

我想用 display: table-cell 对于内容栏,我相信我需要使用 display: table-header-group 用于标题列。

在研究时 显示:表头组 ,我找不到任何文档完全关于如何使用此CSS属性。W3C学校说了以下内容。

表标题组:让元素的行为类似 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>

如果有人对 表格标题组 我会非常感激的。

1 回复 | 直到 11 年前

vsync 7 年前

我没有任何经验,但逻辑表明你只能一 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>