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

Question

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

Make div and table header fixed on scroll

How to add a scrollbar to an HTML5 table?

这是我的桌子

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