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

Posted 2023-05-08

【中文标题】有一个标题不在 div 表上滚动

【英文标题】：have a header not scroll on table of divs

【发布时间】：2018-09-16 23:51:19

【问题描述】：

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

【参考方案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>

【讨论】：

你确定吗？在您的示例中，该类没有元素（也许这来自您正在使用的库，我不知道）。但是从 CSS 中，我假设某些具有 THIS 类的元素是所有元素的祖先：总是有 .THIS.divTable****** 决定父子关系。

【参考方案2】：

要实现这一点，您应该对表格主体应用固定高度并设置主体以滚动。

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

这是一个例子JSFiddle。

【讨论】：

如果我这样做，它会错过对齐身体对齐它会将所有 div 推到左边

您可以使用具有固定高度的包装器来防止这种情况发生。有关详细信息，请参阅this SO 问题。