有一个标题不在 div 表上滚动

Question

我有由div组成的表格，我有一个标题和主体，在正文内部我正在对组件进行迭代。 它工作正常，但我想使标题在滚动时不向下滚动 我尝试了许多不同的选项，但它们破坏了我放错位置的表格单元格 我尝试过的一些选项是

使div 和表标题固定在滚动上

如何向HTML5表格添加滚动条？

这是我的桌子

<div class="divTable">
<div class="divTableHeading">
    <div class="divTableRow">
        <div class="divTableHead">Email</div>
        <div class="divTableHead">Date</div>
        <div class="divTableHead">Id</div>
    </div>
</div>
<div class="divTableBody">
    <div class="divTableRow">
     <aura:iteration items="{!v.workList}" var="work" indexVar="index">
     <div  class="divTableRow">
         <c:AdminHours userEmail="{!v.userEmail}" changedDate="{!v.changedDate}" a recordId="{!v.recordId}" />
      </div>
    </aura:iteration>
   </div>
 </div>
 </div>

这是我的 CSS

.THIS .divTable{
  display: table;
  width: 100%;
 }
.THIS .divTableRow {
display: table-row;
}
.THIS .divTableHeading {
display: table-header-group;
}
.THIS .divTableCell,.THIS .divTableHead {
  border: 1px solid #dddddd;
  display: table-cell;
  padding: 3px 10px;
}
.THIS .divTableHeading {
  display: table-header-group;
  font-weight: bold;
  background-color: #f3f2f2;
}
.THIS .divTableBody {
  display: table-row-group;
}

Answer 1

我不知道

aura：iteration，但也许你可以改编我的模拟。我还从所有元素中删除了 THIS 类，并添加了一个带有类 THIS 的顶级div。检查你的CSS，看起来这是你的意图。

.THIS .divTable{
  display: table;
  width: 100%;
 }
.THIS .divTableRow {
display: table-row;
}
.THIS .divTableHeading {
display: block;
/*
  Fixed position.
*/
position: fixed;
}
.THIS .divTableCell,.THIS .divTableHead {
  border: 1px solid #dddddd;
  display: table-cell;
  padding: 3px 10px;
}
.THIS .divTableHeading {
  display: table-header-group;
  font-weight: bold;
  background-color: #f3f2f2;
}
.THIS .divTableBody {
  display: table-row-group;
}
/*
  Trick to make some space for the header in first row.
*/
.THIS .divTableBody .divTableRow:first-child div {
  padding-top: 30px;
}

<div class="THIS">
<div class="divTable">
<div class="divTableHeading">
    <div class="divTableRow">
        <div class="divTableHead">Email</div>
        <div class="divTableHead">Date</div>
        <div class="divTableHead">Id</div>
    </div>
</div>
<div class=" divTableBody">
    <div class="divTableRow"><div>Some data</div></div>
    <div class="divTableRow"><div>Some data</div></div>
    <div class="divTableRow"><div>Some data</div></div>
    <div class="divTableRow"><div>Some data</div></div>
    <div class="divTableRow"><div>Some data</div></div>
    <div class="divTableRow"><div>Some data</div></div>
    <div class="divTableRow"><div>Some data</div></div>
    <div class="divTableRow"><div>Some data</div></div>
    <div class="divTableRow"><div>Some data</div></div>
    <div class="divTableRow"><div>Some data</div></div>
    <div class="divTableRow"><div>Some data</div></div>
    <div class="divTableRow"><div>Some data</div></div>
    <div class="divTableRow"><div>Some data</div></div>
    <div class="divTableRow"><div>Some data</div></div>
    <div class="divTableRow"><div>Some data</div></div>
    <div class="divTableRow"><div>Some data</div></div>
    <div class="divTableRow"><div>Some data</div></div>
    <div class="divTableRow"><div>Some data</div></div>
    <div class="divTableRow"><div>Some data</div></div>
    <div class="divTableRow"><div>Some data</div></div>
    <div class="divTableRow"><div>Some data</div></div>
    <div class="divTableRow"><div>Some data</div></div>
    <div class="divTableRow"><div>Some data</div></div>
    <div class="divTableRow"><div>Some data</div></div>
    <div class="divTableRow"><div>Some data</div></div>
    <div class="divTableRow"><div>Some data</div></div>
    <div class="divTableRow"><div>Some data</div></div>
    <div class="divTableRow"><div>Some data</div></div>
     <div  class="divTableRow">
         <c:AdminHours userEmail="{!v.userEmail}" changedDate="{!v.changedDate}" a recordId="{!v.recordId}" />
      </div>
   </div>
 </div>
 </div>

Answer 2

为此，您应该对表体应用固定高度，并设置正文样式以滚动。

.divTableBody {
  height: 100%;
  overflow-y: scroll;
}

下面是一个示例 JSFiddle。