have a header not scroll on table of divs

Question

I have table made of divs and I have a header and body, inside the body im doing iteration of the component. it works fine but I want to make the header not to scroll down when I scroll I tried many different options and they ruined my misplaced the table cells some options I have tried are

Make div and table header fixed on scroll

How to add a scrollbar to an HTML5 table?

here is my 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>

This is my 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;
}

score 0 · Answer 1 · answered Apr 06 '18 at 22:20

I don't know about aura:iteration but maybe You can adapt my mock. I have also removed THIS class from all of the elements and added a top-level div with class THIS. Checking Your CSS, it looks like this was Your intention.

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

Are You sure? In Your example there is no element with THIS class (maybe this comes from the library You are using, I don't know). But from the CSS I assume that some element with THIS class is the ancestor of all of the elements: there is always .THIS.divTable****** which determines the parent-child relation. — zolv, Apr 06 '18 at 23:16

score 0 · Answer 2 · answered Apr 06 '18 at 22:31

0

To achieve this you should apply a fixed height to the table body and style the body to scroll.

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

Here's an example JSFiddle.

answered Apr 06 '18 at 22:31

Jake Holzinger

5,783
2
19
33

if I do this it misses with alignments the body alignments it pushes all divs to the left – Amer Bearat Apr 06 '18 at 22:42
You can prevent that using a wrapper with a fixed height. See [this](https://stackoverflow.com/questions/19208826/preventing-relayout-due-to-scrollbar) SO question for details. – Jake Holzinger Apr 06 '18 at 23:02

have a header not scroll on table of divs

2 Answers2