如何使用`display：table`从div设置表头以坚持到顶部

时间：2018-02-20 16:08:16

标签： html css html-table

我想让.table-header用display: table贴在div的顶部。我不允许使用<table>代码，也不允许使用position: sticky，因为它是实验性的。

所以我只允许使用带有匹配CSS显示的<div>标签（display: table — table-row — table-cell ...）

我尝试将position: relative放在我的容器上，position: absolute; top: 0;放在.table-header上，但它一直在消失。滚动时如何粘到顶部？

.container {
  border: 2px solid #CFDFE5;
  border-radius: 5px;
  height: 70vh;
  overflow: scroll;
  position: relative;
}

#super-table {
  display: table;
  padding: 5px;
  border-collapse: collapse;
}

.row div {
  display: table-cell;
  padding: 0 8px;
  vertical-align: middle;
}

.row {
  display: table-row;
  height: 30px;
  border-width: 1px 0;
  border-style: solid;
  border-color: #CFDFE5;
}

.table-header {
  position: absolute;
  top: 0;
}
<div class="container">
  <div id="super-table" class="flex-col">
    <div class="table-header row">
      <div>First Name</div>
      <div>Last Name</div>
      <div>Birthdate</div>
      <div>Email</div>
    </div>
    <div class="row">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="row">
      <div class="">Neil</div>
      <div class="">Richter</div>
      <div class="">14/08/99</div>
      <div class="">me@neilrichter.com</div>
    </div>
    <div class="row">
      <div class="">Mohamed</div>
      <div class="">Georges</div>
      <div class="">12/05/68</div>
      <div class="">gh@ggggggAzeazeaze.azezae</div>
    </div>
    <div class="row">
      <div class="">Denis</div>
      <div class="">Brogniart</div>
      <div class="">01/05/54</div>
      <div class="">denis.brogniart@ggggG.ggggg</div>
    </div>
    <div class="row">
      <div class="">Jean-Mich</div>
      <div class="">Crapeau</div>
      <div class="">20/03/98</div>
      <div class="">Jean-Michclui.ilesttropfort</div>
    </div>
    <div class="row">
      <div class="">Jean-Mich</div>
      <div class="">Crapeau</div>
      <div class="">20/03/98</div>
      <div class="">Jean-Michclui.ilesttropfort</div>
    </div>
    <div class="row">
      <div class="">Jean-Mich</div>
      <div class="">Crapeau</div>
      <div class="">20/03/98</div>
      <div class="">Jean-Michclui.ilesttropfort</div>
    </div>
    <div class="row">
      <div class="">Jean-Mich</div>
      <div class="">Crapeau</div>
      <div class="">20/03/98</div>
      <div class="">Jean-Michclui.ilesttropfort</div>
    </div>
    <div class="row">
      <div class="">Jean-Mich</div>
      <div class="">Crapeau</div>
      <div class="">20/03/98</div>
      <div class="">Jean-Michclui.ilesttropfort</div>
    </div>
    <div class="row">
      <div class="">Jean-Mich</div>
      <div class="">Crapeau</div>
      <div class="">20/03/98</div>
      <div class="">Jean-Michclui.ilesttropfort</div>
    </div>
    <div class="row">
      <div class="">Jean-Mich</div>
      <div class="">Crapeau</div>
      <div class="">20/03/98</div>
      <div class="">Jean-Michclui.ilesttropfort</div>
    </div>
    <div class="row">
      <div class="">Jean-Mich</div>
      <div class="">Crapeau</div>
      <div class="">20/03/98</div>
      <div class="">Jean-Michclui.ilesttropfort</div>
    </div>
    <div class="row">
      <div class="">Jean-Mich</div>
      <div class="">Crapeau</div>
      <div class="">20/03/98</div>
      <div class="">Jean-Michclui.ilesttropfort</div>
    </div>
    <div class="row">
      <div class="">Jean-Mich</div>
      <div class="">Crapeau</div>
      <div class="">20/03/98</div>
      <div class="">Jean-Michclui.ilesttropfort</div>
    </div>
    <div class="row">
      <div class="">Jean-Mich</div>
      <div class="">Crapeau</div>
      <div class="">20/03/98</div>
      <div class="">Jean-Michclui.ilesttropfort</div>
    </div>
    <div class="row">
      <div class="">Jean-Mich</div>
      <div class="">Crapeau</div>
      <div class="">20/03/98</div>
      <div class="">Jean-Michclui.ilesttropfort</div>
    </div>
    <div class="row">
      <div class="">Jean-Mich</div>
      <div class="">Crapeau</div>
      <div class="">20/03/98</div>
      <div class="">Jean-Michclui.ilesttropfort</div>
    </div>
    <div class="row">
      <div class="">Jean-Mich</div>
      <div class="">Crapeau</div>
      <div class="">20/03/98</div>
      <div class="">Jean-Michclui.ilesttropfort</div>
    </div>
  </div>
</div>

注意：我也不允许使用jQuery。

1 个答案:

答案 0 :(得分：0)

更新了解决方案

以下是基于各种想法的修订提案，它会添加一层标记，但会为您提供所需的结果。缺点是您必须在每一行（(min-)width部分）上明确设置nth-child(n)，并对某些元素使用display: block以启用overflow。我还添加了box-sizing规则，以确保计算出的元素根据其定义的维度占用空间。我在代码中添加了注释，以进一步解释我的更改。

* { box-sizing: border-box; }

.container {
  border: 2px solid #CFDFE5;
  border-radius: 5px;
  height: 70vh;
  position: relative;
  overflow: hidden;
}

#super-table {
  display: block; /* Necessary to use overflow */
  height: 100%;
  padding: 5px;
}

.row {
  display: table;
  table-layout: fixed;
  height: 30px;
  border-width: 1px 0;
  border-style: solid;
  border-color: #CFDFE5;
  border-collapse: collapse;
}

.row div {
  display: table-cell;
  padding: 0 8px;
  vertical-align: middle;
}

/* Manually setting the width is necessary so the header and the cells columns match */
.row div:nth-child(1) {
  min-width: 128px;
}

.row div:nth-child(2) {
  min-width: 128px;
}

.row div:nth-child(3) {
  min-width: 128px;
}

.row div:nth-child(4) {
  min-width: 320px;
  width: 100%; /* Ensues the final cell takes up the rest of the available width */
}

.table-header {
  display: block; /* Not necessary (display: table-header-group works too but the parent isn't set to display: table so it feels pointless) here but useful if you convert your <div> to a <tr> */
}

.table-body {
  display: block; /* Necessary to use the overflow property */
  height: calc(100% - 30px); /* Given your rows are set to 30px of height, the final height must be calculated with 100% minus the header  height, or else it takes up a 100% of the parent, so a row gets left out */
  overflow: auto;
}
<div class="container">
  <div id="super-table" class="flex-col">
    <div class="table-header">
      <div class="row">
        <div>First Name</div>
        <div>Last Name</div>
        <div>Birthdate</div>
        <div>Email</div>
      </div>
    </div>
    <div class="table-body">
      <div class="row">
        <div class="">Neil</div>
        <div class="">Richter</div>
        <div class="">14/08/99</div>
        <div class="">me@neilrichter.com</div>
      </div>
      <div class="row">
        <div class="">Mohamed</div>
        <div class="">Georges</div>
        <div class="">12/05/68</div>
        <div class="">gh@ggggggAzeazeaze.azezae</div>
      </div>
      <div class="row">
        <div class="">Denis</div>
        <div class="">Brogniart</div>
        <div class="">01/05/54</div>
        <div class="">denis.brogniart@AH.ahhhhhh</div>
      </div>
      <div class="row">
        <div class="">Jean-Mich</div>
        <div class="">Crapeau</div>
        <div class="">20/03/98</div>
        <div class="">Jean-Michclui.ilesttropfort</div>
      </div>
      <div class="row">
        <div class="">Jean-Mich</div>
        <div class="">Crapeau</div>
        <div class="">20/03/98</div>
        <div class="">Jean-Michclui.ilesttropfort</div>
      </div>
      <div class="row">
        <div class="">Jean-Mich</div>
        <div class="">Crapeau</div>
        <div class="">20/03/98</div>
        <div class="">Jean-Michclui.ilesttropfort</div>
      </div>
      <div class="row">
        <div class="">Jean-Mich</div>
        <div class="">Crapeau</div>
        <div class="">20/03/98</div>
        <div class="">Jean-Michclui.ilesttropfort</div>
      </div>
      <div class="row">
        <div class="">Jean-Mich</div>
        <div class="">Crapeau</div>
        <div class="">20/03/98</div>
        <div class="">Jean-Michclui.ilesttropfort</div>
      </div>
      <div class="row">
        <div class="">Jean-Mich</div>
        <div class="">Crapeau</div>
        <div class="">20/03/98</div>
        <div class="">Jean-Michclui.ilesttropfort</div>
      </div>
      <div class="row">
        <div class="">Jean-Mich</div>
        <div class="">Crapeau</div>
        <div class="">20/03/98</div>
        <div class="">Jean-Michclui.ilesttropfort</div>
      </div>
      <div class="row">
        <div class="">Jean-Mich</div>
        <div class="">Crapeau</div>
        <div class="">20/03/98</div>
        <div class="">Jean-Michclui.ilesttropfort</div>
      </div>
      <div class="row">
        <div class="">Jean-Mich</div>
        <div class="">Crapeau</div>
        <div class="">20/03/98</div>
        <div class="">Jean-Michclui.ilesttropfort</div>
      </div>
      <div class="row">
        <div class="">Jean-Mich</div>
        <div class="">Crapeau</div>
        <div class="">20/03/98</div>
        <div class="">Jean-Michclui.ilesttropfort</div>
      </div>
      <div class="row">
        <div class="">Jean-Mich</div>
        <div class="">Crapeau</div>
        <div class="">20/03/98</div>
        <div class="">Jean-Michclui.ilesttropfort</div>
      </div>
      <div class="row">
        <div class="">Jean-Mich</div>
        <div class="">Crapeau</div>
        <div class="">20/03/98</div>
        <div class="">Jean-Michclui.ilesttropfort</div>
      </div>
      <div class="row">
        <div class="">Jean-Mich</div>
        <div class="">Crapeau</div>
        <div class="">20/03/98</div>
        <div class="">Jean-Michclui.ilesttropfort</div>
      </div>
      <div class="row">
        <div class="">Jean-Mich</div>
        <div class="">Crapeau</div>
        <div class="">20/03/98</div>
        <div class="">Jean-Michclui.ilesttropfort</div>
      </div>
    </div>
  </div>
</div>

<强>参考文献：

  1. Creating Cross-Browser Scrollable s—A CSS-Only Approach
  2. CSS Only Fixed Table Headers on CodePen

    3. 原帖

    将.table-header设置为position: fixed;会产生此效果，但您会看到它移动到视口的顶部。删除top属性会将其置于“假定”的位置（即使它不在流程中）。然后，您可以使用margin或transform: translate(X, Y)调整其排名。请注意，这有点hacky，但根据您的使用，它应该结果没问题（请注意，如果您需要滚动查看表，这将无法按预期工作 - 在滚动元素中设置非标题行可能更多才多艺）。

    .container {
  border: 2px solid #CFDFE5;
  border-radius: 5px;
  height: 70vh;
  overflow: scroll;
  position: relative;
}

#super-table {
  display: table;
  padding: 5px;
  border-collapse: collapse;
}

.row div {
  display: table-cell;
  padding: 0 8px;
  vertical-align: middle;
}

.row {
  display: table-row;
  height: 30px;
  border-width: 1px 0;
  border-style: solid;
  border-color: #CFDFE5;
}

.table-header {
  position: fixed;
  background-color: white;
}
    <div class="container">
  <div id="super-table" class="flex-col">
    <div class="table-header row">
      <div>First Name</div>
      <div>Last Name</div>
      <div>Birthdate</div>
      <div>Email</div>
    </div>
    <div class="row">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="row">
      <div class="">Neil</div>
      <div class="">Richter</div>
      <div class="">14/08/99</div>
      <div class="">me@neilrichter.com</div>
    </div>
    <div class="row">
      <div class="">Mohamed</div>
      <div class="">Georges</div>
      <div class="">12/05/68</div>
      <div class="">gh@ggggggAzeazeaze.azezae</div>
    </div>
    <div class="row">
      <div class="">Denis</div>
      <div class="">Brogniart</div>
      <div class="">01/05/54</div>
      <div class="">denis.brogniart@ggggG.ggggg</div>
    </div>
    <div class="row">
      <div class="">Jean-Mich</div>
      <div class="">Crapeau</div>
      <div class="">20/03/98</div>
      <div class="">Jean-Michclui.ilesttropfort</div>
    </div>
    <div class="row">
      <div class="">Jean-Mich</div>
      <div class="">Crapeau</div>
      <div class="">20/03/98</div>
      <div class="">Jean-Michclui.ilesttropfort</div>
    </div>
    <div class="row">
      <div class="">Jean-Mich</div>
      <div class="">Crapeau</div>
      <div class="">20/03/98</div>
      <div class="">Jean-Michclui.ilesttropfort</div>
    </div>
    <div class="row">
      <div class="">Jean-Mich</div>
      <div class="">Crapeau</div>
      <div class="">20/03/98</div>
      <div class="">Jean-Michclui.ilesttropfort</div>
    </div>
    <div class="row">
      <div class="">Jean-Mich</div>
      <div class="">Crapeau</div>
      <div class="">20/03/98</div>
      <div class="">Jean-Michclui.ilesttropfort</div>
    </div>
    <div class="row">
      <div class="">Jean-Mich</div>
      <div class="">Crapeau</div>
      <div class="">20/03/98</div>
      <div class="">Jean-Michclui.ilesttropfort</div>
    </div>
    <div class="row">
      <div class="">Jean-Mich</div>
      <div class="">Crapeau</div>
      <div class="">20/03/98</div>
      <div class="">Jean-Michclui.ilesttropfort</div>
    </div>
    <div class="row">
      <div class="">Jean-Mich</div>
      <div class="">Crapeau</div>
      <div class="">20/03/98</div>
      <div class="">Jean-Michclui.ilesttropfort</div>
    </div>
    <div class="row">
      <div class="">Jean-Mich</div>
      <div class="">Crapeau</div>
      <div class="">20/03/98</div>
      <div class="">Jean-Michclui.ilesttropfort</div>
    </div>
    <div class="row">
      <div class="">Jean-Mich</div>
      <div class="">Crapeau</div>
      <div class="">20/03/98</div>
      <div class="">Jean-Michclui.ilesttropfort</div>
    </div>
    <div class="row">
      <div class="">Jean-Mich</div>
      <div class="">Crapeau</div>
      <div class="">20/03/98</div>
      <div class="">Jean-Michclui.ilesttropfort</div>
    </div>
    <div class="row">
      <div class="">Jean-Mich</div>
      <div class="">Crapeau</div>
      <div class="">20/03/98</div>
      <div class="">Jean-Michclui.ilesttropfort</div>
    </div>
    <div class="row">
      <div class="">Jean-Mich</div>
      <div class="">Crapeau</div>
      <div class="">20/03/98</div>
      <div class="">Jean-Michclui.ilesttropfort</div>
    </div>
    <div class="row">
      <div class="">Jean-Mich</div>
      <div class="">Crapeau</div>
      <div class="">20/03/98</div>
      <div class="">Jean-Michclui.ilesttropfort</div>
    </div>
  </div>
</div>

相关问题
最新问题