2

我有一个由 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;
}
4

2 回答 2

0

为此，您应该对表格主体应用固定高度并将主体设置为滚动。

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

这是一个示例JSFiddle。

于 2018-04-06T22:31:34.950 回答
0

我不知道 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>

于 2018-04-06T22:20:43.693 回答