We have a requirement i.e Table scroll should be horizontal and vertical but when we scroll vertical, title should be Freeze
.
I have achieved almost requirement but when i scroll vertically Table header is moving up.
Also tried with two tables, one is for Header and second is for body, but table alignments are not displaying properly.Even though two tables are having same width or measurement.
Attaching the image and Code.
Lighting component:-
<div class="panel">
<div class="body_panel">
<table class="slds-table slds-table_bordered slds-table_cell-buffer slds-truncate">
<thead class="header">
<tr class="slds-text-title_caps">
<th scope="col">
<div class="slds-truncate" title="{!$Label.c.Actions}">{!$Label.c.Actions}</div>
</th>
<th scope="col">
<div class="slds-truncate" title="{!$Label.c.No_Label}">{!$Label.c.No_Label}</div>
</th>
<th scope="col">
<div class="slds-truncate" title="{!$Label.c.Title}">{!$Label.c.Title}</div>
</th>
<th scope="col">
<div class="slds-truncate" title="{!$Label.c.Flag}">{!$Label.c.Flag}</div>
</th>
<th scope="col">
<div class="slds-truncate" title="{!$Label.c.Owner_label}">{!$Label.c.Owner_label}</div>
</th>
<th scope="col">
<div class="slds-truncate" title="{!$Label.c.Last_Modified}">{!$Label.c.Last_Modified}</div>
</th>
<th scope="col">
<div class="slds-truncate" title="{!$Label.c.Size}">{!$Label.c.Size}</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Article">Article</div>
</th>
</tr>
</thead>
<tbody class="body">
<aura:iteration items="{!v.Attachments}" var="item" indexVar="index">
<aura:if isTrue="{!item.display}">
<tr>
<td scope="row">
<lightning:buttonmenu menualignment="right" title="{!item.ContentDocument.Title}"
name="{!item.ContentDocument.LatestPublishedVersionId}"
alternativetext="{!$Label.c.Settings}" onselect="{! c.handleMenuSelect }">
<aura:if isTrue="{!item.isPreviewAvailable}">
<lightning:menuitem aura:id="view" iconName="utility:preview"
label="{!$Label.c.View}" value="view"
title="{!$Label.c.View + ' ' +item.ContentDocument.Title}" />
</aura:if>
<lightning:menuitem aura:id="download" iconName="utility:download"
label="{!$Label.c.Download}" value="download"
title="{!$Label.c.Download+' ' +item.ContentDocument.Title}" />
<lightning:menuitem aura:id="delete" iconName="utility:delete"
label="{!$Label.c.Delete}" value="delete"
title="{!$Label.c.Delete+' ' +item.ContentDocument.Title}" />
<aura:if isTrue="{!and(item.ContentDocument.FileExtension=='csv',v.csvAccess)}">
<!-- Start PUX-1803,1909 -->
<aura:if
isTrue="{!or(or(item.ContentDocument.Owner.Id == v.loggedUser, v.userProfile), v.Case.OwnerId == v.loggedUser)}">
<!-- END PUX-1803,1909 -->
<lightning:menuitem aura:id="Edit" iconName="utility:edit"
label="{!$Label.c.LABS_SF_Edit}" value="Edit"
title="{!$Label.c.LABS_SF_Edit+' ' +item.ContentDocument.Title}" />
</aura:if>
</aura:if>
</lightning:buttonmenu>
</td>
<td scope="row">
{!item.counter}
</td>
<td scope="row" id="{!item.ContentDocument.LatestPublishedVersionId}"
data-value="{!item.ContentDocument.Title}" data-visible="{!item.isPreviewAvailable}"
data-id="{!item.ContentDocument.Id}" class="hover-pointer"
onclick="{!c.openAttachViewer}">
<div class="slds-media">
<div class="slds-media__figure">
<span class="slds-icon_container" title="">
<lightning:icon iconName="{!item.icon}" size="medium" />
</span>
</div>
<div class="slds-media__body">
<h1 class="slds-text-heading_small slds-truncate slds-align-middle">
{!item.ContentDocument.Title}</h1>
</div>
</div>
</td>
<td scope="row">
<div onclick="{!c.changeFlag}"
data-value="{!item.ContentDocument.LatestPublishedVersionId}"
data-flag="{!v.namespace==''?item.ContentDocument.LatestPublishedVersion.Flag__c : item.ContentDocument.LatestPublishedVersion.CoraPLM__Flag__c}">
<aura:if
isTrue="{!if(v.namespace=='',item.ContentDocument.LatestPublishedVersion.Flag__c=='Flag',item.ContentDocument.LatestPublishedVersion.CoraPLM__Flag__c=='Flag')}">
<img class="icon-header" src="{!$Resource.Icon_img + '/icons/green.png'}"
width="30" height="30" title="{!$Label.c.Flag}" />
</aura:if>
<aura:if
isTrue="{!if(v.namespace=='',item.ContentDocument.LatestPublishedVersion.Flag__c=='Non Flag',item.ContentDocument.LatestPublishedVersion.CoraPLM__Flag__c=='Non Flag')}">
<img class="icon-header" src="{!$Resource.Icon_img + '/icons/orange.png'}"
width="30" height="30" title="{!$Label.c.Non_Flag}" />
</aura:if>
<aura:if
isTrue="{!if(v.namespace=='',item.ContentDocument.LatestPublishedVersion.Flag__c=='Archive',item.ContentDocument.LatestPublishedVersion.CoraPLM__Flag__c=='Archive')}">
<img class="icon-header" src="{!$Resource.Icon_img + '/icons/red.png'}"
width="30" height="30" title="{!$Label.c.Archive}" />
</aura:if>
</div>
</td>
<td scope="row">
<ui:outputText value="{!item.ContentDocument.Owner.Name}" />
</td>
<td scope="row">
<lightning:formattedDateTime value="{!item.ContentDocument.LastModifiedDate}"
year="numeric" month="numeric" day="numeric" hour="2-digit" minute="2-digit"
timeZone="{!$Locale.timezone}" />
</td>
<td scope="row">
{!item.Size}
</td>
<td scope="row">
<aura:if
isTrue="{!if(v.namespace=='',item.ContentDocument.LatestPublishedVersion.KB_Article__c==true,item.ContentDocument.LatestPublishedVersion.CoraPLM__KB_Article__c==true)}">
<div class="slds-form-element">
<div class="slds-form-element__control">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-44"
value="checkbox-44" checked="true" disabled="true" />
<label class="slds-checkbox__label" for="checkbox-44">
<span class="slds-checkbox_faux"></span>
</label>
</div>
</div>
</div>
<aura:set attribute="else">
<lightning:input type="checkbox" name="KBArticle" Checked="false"
disabled="true" />
</aura:set>
</aura:if>
</td>
</tr>
</aura:if>
</aura:iteration>
</tbody>
</table>
</div>
</div>
CSS File:-
.THIS .slds-table_bordered {
table-layout: unset;
width: 100%;
border-collapse: collapse;
}
.THIS .header th {
border-left: 1px solid #d0d0d0;
/*width: 200px;*/
padding: 8px;
border-bottom: 1px solid #d0d0d0;
text-align: -webkit-center;
}
.THIS .body tr {
border-bottom: 1px;
}
.THIS .panel {
width: 100%;
overflow-y: hidden;
}
.THIS .body_panel {
display: inline-block;
height: 61vh;
overflow-x: hidden;
}
.THIS .body td {
border-left: 1px solid #d0d0d0;
padding: 8px;
/*width: 200px;*/
text-align: -webkit-center;
}
.THIS ::-webkit-scrollbar {
width: 6px;
height:6px;
}
Best Answer
Give this property to table body rather then panel class
For more info follow this link Table scroll bar