Hi Folks,

We have a requirement like Table scroll should be horizontal and vertical but when we scroll vertically, title should be Freeze.
I have tried two scenario's 
1) Single Table:-  Horizantal scroll is working but when i scroll vertically table header also moving up.  But title should freeze.
2) 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.

Finally i come to know one table is suitable for my requirement.

Please fine the below Code( title and body with One table).

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)}">
                                            <aura:if
                                                isTrue="{!or(or(item.ContentDocument.Owner.Id == v.loggedUser, v.userProfile), v.Case.OwnerId == v.loggedUser)}">
                                                <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.Flag__c}">
                                        <aura:if
                                            isTrue="{!if(v.namespace=='',item.ContentDocument.LatestPublishedVersion.Flag__c=='Flag',item.ContentDocument.LatestPublishedVersion.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.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.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.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:

.THIS .slds-table_bordered {
   table-layout: unset;
   width: 100%;
   border-collapse: collapse;
 }
 .THIS .header th {
   border-left: 1px solid #d0d0d0;
   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;
   text-align: -webkit-center;
 }
 .THIS ::-webkit-scrollbar {
     width: 6px;
     height:6px;
 }