Sticky headers on working on one table while scrolling horizontally

Question

I have two tables table one and table 2 implemented one above the other. I have frozen the column headers which are displayed vertically. So that when the user scrolls horizontally the headers remain static.I have applied attribute sticky to the th element as seen in the css. I have enclosed the two tables under one div and assigned class scrollHorizontal so that when the user scrolls horizontally both the tables move together. Unfortunately when the user scroll horizontally only the first table column sticks and not the table in the bottom. Could anybody tell me the reason why

Screenshot

th {
  padding: 7px;
  position: sticky;
  left: 0px;
  min-width: 250px;
  width: 250px;
  background-color: #f5f7f7;
}

td {
  padding: 7px;
  min-width: 300px;
  width: 300px;
  /* max-width: 300px; */
}

.headerText {
  font-weight: bold;
}

.sideLetterBackgroundColor {
  background-color: #DFF0D8;
}

.fundClassesTable {
  table-layout: fixed;
}

.cellbgcolor {
  color: transparent;
}

.k-dropdown-wrap>.k-input,
.k-dropdown .k-dropdown-wrap .k-select,
.k-list,
.k-reset {
  background-color: #DFF0D8;
}

.btn {}

.tableItem {
  text-align: left;
  border-left: solid 1px lightgrey;
  border-top: solid 1px lightgrey;
  border-right: solid 1px lightgrey;
  border-bottom: solid 1px lightgrey;
}

.rowItem:hover {
  background-color: #f5f7f7;
}

label {
  margin-left: 0.5rem;
  vertical-align: middle
}

.panel-heading {
  color: black;
  border-color: #ddd;
  overflow: hidden;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.panel-heading .left-label {
  display: inline-block;
  padding-top: 5px !important;
}

.scrollClass {
  /* overflow-x: scroll; */
  display: grid;
  overflow-y: hidden;
  height: 100%;
}

.panel-heading label {
  margin-bottom: 0px !important;
}

.btn-disabled {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
  opacity: 0.3;
  color: #fff;
  background-color: #ee6e0b;
  border-color: #d6630a;
  font-size: 13px;
  padding: 8px;
}

#LegalFundClass1 #LegalFundClass tr:hover {
  background-color: #ECF0F1;
}

.collapsed {
  color: #d6630a;
  font-size: 22px;
  text-decoration: none;
  font-weight: bold;
}

.expanded {
  color: #d6630a;
  font-size: 22px;
  text-decoration: none;
  font-weight: bold;
}

.mainheading {
  background-color: gray;
  color: white;
}

.subheading {
  background-color: lightgray;
}


/* .card-body {
            flex: 1 1 auto;
            padding: 0px;
            margin: 10px 0;
            background-color: white;
        } */

.card-body1 {
  flex: 1 1 auto;
  background-color: white;
  position: relative!important;
  display: grid;
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 10px;
}

.card-body {
  flex: 1 1 auto;
  background-color: white;
  height: 1200px;
  position: relative !important;
  overflow-y: scroll;
  overflow-x: hidden;
}

.scrollHorizontal {
  overflow-x: scroll;
}

<div class="card ">
  <div class="card-header panel-heading">
    <span class="left-label" style="font-size: 18px; font-weight: bold; ">Legal Fund Classes</span>

    <a class="pull-right" [ngClass]="{'collapsed': !isExpanded, 'expanded': isExpanded }" data-toggle="collapse" href="javascript:void(0);" (click)="expand()" role="button" [attr.aria-expanded]="isExpanded" aria-controls="legalFundClass"> {{ isExpanded ? '-' : '+' }}
                </a>

    <div *ngIf="CanEdit" class="pull-right" style="padding-right:10px; display: inline-block; vertical-align:middle">
      <button style="text-align: center; vertical-align:middle; margin-left: 10px" class="btn btn-default pull-right" (click)="openCloneModal()"> <i data-bind="visible: true"
                            class="fa fa-copy"></i> Clone</button>

      <button style="text-align: center; vertical-align:middle" class="btn btn-default pull-right" (click)="openLegalFundClassModal()"> <i data-bind="visible: true" class="fa fa-plus-square"></i> Add
                        Class</button>
    </div>

    <div class="pull-right" style="padding-right:10px; display: inline-block; vertical-align:middle">
      <label style="text-align: center; vertical-align:middle" class="btn btn-primary" [ngClass]="{'btn-primary': InvestedOnly, 'btn-default': !InvestedOnly }"><input type="checkbox"
                            (click)="isInvestedSelected($event)" checked="checked" [(ngModel)]="InvestedOnly" class="hidden"
                            for="chkInvested1" />Invested Only
        
                        <img *ngIf="ProcessInvested" src="../../images/ajax-loader2.gif"
                            style="width: 30px; height: 20px;padding-left:10px" title="Wait" /></label>
    </div>
  </div>

  <div [ngClass]="{'show': isExpanded}" id="legalFundClass" class="collapse scrollHorizontal" role="tabpanel" aria-labelledby="legalFundClass_heading" data-parent="#legalFundClass" [attr.aria-expanded]="isExpanded">
    <div class="card-body1" *ngIf="LegalFundClasses && LegalFundClasses.AllTerms && LegalFundClasses.LegalFundClassColumnNames1  && LegalFundClasses.LegalFundClassColumnNames2">

      <table id="LegalFundClass1" class="fundClassesTable table-striped ">
        <tr *ngFor="let c of LegalFundClasses.LegalFundClassColumnNames1">
          <ng-container *ngIf="c !='Hurdle Rate Basis' && c != 'Hurdle Rate %' && c != 'Hurdle Rate Index' || isHurdle;">
            <ng-container *ngIf="c !='Clawback %' || isClawback">

              <th *ngIf="(!CanEdit && c != 'Buttons2' && c != 'Space3' ) || CanEdit" [ngClass]="c != 'Space1'  && c != 'Buttons2'  ? 'tableItem bold' : 'tableItem cellbgcolor'">
                {{ c }}</th>

              <ng-container *ngFor="let f of LegalFundClasses.AllTerms; let i=index;">
                <ng-container *ngIf="f.LegalFundClassCommercialViewModel">

                  <td class="tableItem" *ngIf="(c == 'Buttons2'  && CanEdit) || (c == 'Buttons2' && CanEditManagerStrategy)">

                    <button *ngIf=" !EditMode[f.LegalFundClassCommercialViewModel.Id]" type="button" class="btn btn-primary btn mr-1 " (click)="buttonClicked(f.LegalFundClassCommercialViewModel.Id)">Edit</button>
                    <button *ngIf="EditMode[f.LegalFundClassCommercialViewModel.Id]" type="button" class="btn btn-primary btn mr-1 " (click)="Update(f.LegalFundClassCommercialViewModel.Id,true)">Save <img
                                                        *ngIf="ProcessSave[f.LegalFundClassCommercialViewModel.Id]"
                                                        src="../../images/ajax-loader2.gif"
                                                        style="width: 30px; height: 20px;padding-left:10px"
                                                        title="Wait" /></button>
                    <button *ngIf="EditMode[f.LegalFundClassCommercialViewModel.Id]" [disabled]="f.LegalFundClassCommercialViewModel.ChildRecordExist" type="button" class="btn btn-primary btn mr-1" [ngClass]="{'btn-disabled' : f.LegalFundClassCommercialViewModel.ChildRecordExist ||!CanEdit && CanEditManagerStrategy }"
                      (click)="Delete(f.LegalFundClassCommercialViewModel.Id)">Delete <img
                                                        *ngIf="ProcessDelete[f.LegalFundClassCommercialViewModel.Id]"
                                                        src="../../images/ajax-loader2.gif"
                                                        style="width: 30px; height: 20px;padding-left:10px"
                                                        title="Wait" /></button>
                    <button *ngIf="EditMode[f.LegalFundClassCommercialViewModel.Id]" type="button" class="btn btn-primary btn mr-1 " (click)="buttonClicked(f.LegalFundClassCommercialViewModel.Id)">Cancel</button>

                  </td>

                  <td [attr.colspan]="!showAddSideLetterButton(f.LegalFundClassCommercialViewModel.Id) ? 0 : 2" class="tableItem " style="font-weight: bold" *ngIf="!EditMode[f.LegalFundClassCommercialViewModel.Id] && c == 'Legal Class Name'">
                    {{f.LegalFundClassCommercialViewModel.Description }}</td>
                  <td [attr.colspan]="!showAddSideLetterButton(f.LegalFundClassCommercialViewModel.Id) ? 0 : 2" [attr.id]="'f.value.Id'" *ngIf="EditMode[f.LegalFundClassCommercialViewModel.Id] && c == 'Legal Class Name'" class="tableItem">
                    <input kendoTextBox [(ngModel)]="f.LegalFundClassCommercialViewModel.Description" style="width: 100%; height: 29.5px;" />
                  </td>
                  <td [attr.colspan]="!showAddSideLetterButton(f.LegalFundClassCommercialViewModel.Id) ? 0 : 2" class="tableItem" *ngIf="c == 'Fund Name'">
                    {{f.LegalFundClassCommercialViewModel.FundName}}</td>


                  <td [attr.colspan]="!showAddSideLetterButton(f.LegalFundClassCommercialViewModel.Id) ? 0 : 2" class="tableItem" *ngIf="c == 'Last Edited'">
                    {{f.LegalFundClassCommercialViewModel.AuditSummary}}</td>
                  <td class="tableItem" *ngIf="c =='Legal Class ID'">
                    {{f.LegalFundClassCommercialViewModel.Id}}</td>
                </ng-container>
              </ng-container>
            </ng-container>
          </ng-container>
        </tr>
      </table>
    </div>

    <div class="card-body scrollClass">
      <table id="LegalFundClass" class="fundClassesTable table-striped ">
        <tr *ngFor="let c of LegalFundClasses.LegalFundClassColumnNames2">
          <ng-container *ngIf="c !='Hurdle Rate Basis' && c != 'Hurdle Rate %' && c != 'Hurdle Rate Index' || isHurdle;">
            <ng-container *ngIf="c !='Clawback %' || isClawback">

              <th *ngIf="(!CanEdit && c != 'Buttons2' && c != 'Space3' ) || CanEdit" [ngClass]="[c != 'Space1' && c != 'Space2' && c != 'Space3' && c != 'Buttons2'  ? 'tableItem bold' : 'tableItem cellbgcolor' ,  
                                                     c == 'TERMS' || c == 'FEES'? 'mainheading' : '',
                                                     c == 'Subscriptions' || c == 'Redemptions' || c == 'Lockup Terms' || c == 'Gating Terms' ? 'subheading' : '']">
                {{ c }}</th>

              <ng-container *ngFor="let f of LegalFundClasses.AllTerms; let i=index;">
                <ng-container *ngIf="f.LegalFundClassCommercialViewModel">

                  <!-- <td class="tableItem"
                                                *ngIf="(c == 'Buttons2'  && CanEdit) || (c == 'Buttons2' && CanEditManagerStrategy)">
        
                                                <button *ngIf=" !EditMode[f.LegalFundClassCommercialViewModel.Id]" type="button"
                                                    class="btn btn-primary btn mr-1 "
                                                    (click)="buttonClicked(f.LegalFundClassCommercialViewModel.Id)">Edit</button>
                                                <button *ngIf="EditMode[f.LegalFundClassCommercialViewModel.Id]" type="button"
                                                    class="btn btn-primary btn mr-1 "
                                                    (click)="Update(f.LegalFundClassCommercialViewModel.Id,true)">Save <img
                                                        *ngIf="ProcessSave[f.LegalFundClassCommercialViewModel.Id]"
                                                        src="../../images/ajax-loader2.gif"
                                                        style="width: 30px; height: 20px;padding-left:10px"
                                                        title="Wait" /></button>
                                                <button *ngIf="EditMode[f.LegalFundClassCommercialViewModel.Id]"
                                                    [disabled]="f.LegalFundClassCommercialViewModel.ChildRecordExist"
                                                    type="button" class="btn btn-primary btn mr-1"
                                                    [ngClass]="{'btn-disabled' : f.LegalFundClassCommercialViewModel.ChildRecordExist ||!CanEdit && CanEditManagerStrategy }"
                                                    (click)="Delete(f.LegalFundClassCommercialViewModel.Id)">Delete <img
                                                        *ngIf="ProcessDelete[f.LegalFundClassCommercialViewModel.Id]"
                                                        src="../../images/ajax-loader2.gif"
                                                        style="width: 30px; height: 20px;padding-left:10px"
                                                        title="Wait" /></button>
                                                <button *ngIf="EditMode[f.LegalFundClassCommercialViewModel.Id]" type="button"
                                                    class="btn btn-primary btn mr-1 "
                                                    (click)="buttonClicked(f.LegalFundClassCommercialViewModel.Id)">Cancel</button>
        
                                            </td>
        
                                            <td [attr.colspan]="!showAddSideLetterButton(f.LegalFundClassCommercialViewModel.Id) ? 0 : 2"
                                                class="tableItem " style="font-weight: bold"
                                                *ngIf="!EditMode[f.LegalFundClassCommercialViewModel.Id] && c == 'Legal Class Name'">
                                                {{f.LegalFundClassCommercialViewModel.Description }}</td>
                                            <td [attr.colspan]="!showAddSideLetterButton(f.LegalFundClassCommercialViewModel.Id) ? 0 : 2"
                                                [attr.id]="'f.value.Id'"
                                                *ngIf="EditMode[f.LegalFundClassCommercialViewModel.Id] && c == 'Legal Class Name'"
                                                class="tableItem">
                                                <input kendoTextBox
                                                    [(ngModel)]="f.LegalFundClassCommercialViewModel.Description"
                                                    style="width: 100%; height: 29.5px;" />
                                            </td>
                                            <td [attr.colspan]="!showAddSideLetterButton(f.LegalFundClassCommercialViewModel.Id) ? 0 : 2"
                                                class="tableItem" *ngIf="c == 'Fund Name'">
                                                {{f.LegalFundClassCommercialViewModel.FundName}}</td>
        
        
                                            <td [attr.colspan]="!showAddSideLetterButton(f.LegalFundClassCommercialViewModel.Id) ? 0 : 2"
                                                class="tableItem" *ngIf="c == 'Last Edited'">
                                                {{f.LegalFundClassCommercialViewModel.AuditSummary}}</td>
                                            <td class="tableItem" *ngIf="c =='Legal Class ID'">
                                                {{f.LegalFundClassCommercialViewModel.Id}}</td> -->


                  <td class="tableItem headerText" *ngIf="c == 'Space1'">COMMERCIAL TERMS</td>
                  <td [attr.colspan]="!showAddSideLetterButton(f.LegalFundClassCommercialViewModel.Id) ? 0 : 2" class="tableItem mainheading" *ngIf="c == 'TERMS'">
                    <div>
                      <button type="button" class="btn btn-default btn" style="float: left;" [disabled]="!CanEdit && CanEditManagerStrategy" (click)="reviewClicked(f.LegalFundClassCommercialViewModel.Id,1)">Review
                                                        Terms <img
                                                            *ngIf="ProcessReviewTerms[f.LegalFundClassCommercialViewModel.Id]"
                                                            src="../../images/ajax-loader2.gif"
                                                            style="width: 30px; height: 20px;padding-left:10px"
                                                            title="Wait" /></button>
                      <div style="float: left; margin: 5px;">
                        {{f.LegalFundClassCommercialViewModel.AuditSummary}}
                      </div>
                    </div>
                  </td>


                  <td [attr.colspan]=recordCount class="tableItem subheading" *ngIf="c == 'Subscriptions'  && i<1 ">
                  </td>

                  <td *ngIf="!EditMode[f.LegalFundClassCommercialViewModel.Id] && c == 'Primary Currency'" class="tableItem">
                    {{f.LegalFundClassCommercialViewModel.PrimaryCurrencyName}}
                  </td>
                  <td *ngIf="EditMode[f.LegalFundClassCommercialViewModel.Id]  && c == 'Primary Currency'" class="tableItem">
                    <kendo-dropdownlist style="height: 29.5px;" [(ngModel)]="f.LegalFundClassCommercialViewModel.CurrencyId" [disabled]="!CanEdit && CanEditManagerStrategy" [defaultItem]="defaultItem" class="form-control  form-control-sm" [data]="LegalFundClasses.Currencies"
                      [filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
                    </kendo-dropdownlist>
                  </td>


                  <td *ngIf="!EditMode[f.LegalFundClassCommercialViewModel.Id] && c == 'Manager Strategy (populate only if different from Fund Manager Strategy)'" class="tableItem">
                    {{f.LegalFundClassCommercialViewModel.ManagerStrategyName}}
                  </td>
                  <td *ngIf="EditMode[f.LegalFundClassCommercialViewModel.Id] && c == 'Manager Strategy (populate only if different from Fund Manager Strategy)'" class="tableItem">
                    <kendo-dropdownlist style="height: 29.5px;" [(ngModel)]="f.LegalFundClassCommercialViewModel.ManagerStrategyId" [defaultItem]="defaultItem" class="form-control  form-control-sm" [data]="LegalFundClasses.ManagerStrategies" [filterable]="false" textField="Name"
                      [valuePrimitive]="true" valueField="Id">
                    </kendo-dropdownlist>
                  </td>

                  <td *ngIf="!EditMode[f.LegalFundClassCommercialViewModel.Id] && c == 'Other Currencies'" class="tableItem">
                    {{f.LegalFundClassCommercialViewModel.OtherCurrencyNames}}
                  </td>
                  <td *ngIf="EditMode[f.LegalFundClassCommercialViewModel.Id] && c == 'Other Currencies'" class="tableItem">

                    <kendo-multiselect [data]="LegalFundClasses.Currencies" [(ngModel)]="f.LegalFundClassCommercialViewModel.OtherCurrencyIds" [disabled]="!CanEdit && CanEditManagerStrategy" [textField]="'Name'" [valueField]="'Id'" (valueChange)="valueChange($event)" [autoClose]="false">
                      <ng-template kendoMultiSelectItemTemplate let-dataItem>
                        <input type="checkbox" class="k-checkbox" [checked]="isItemSelected(dataItem.Name)">
                        <label class="k-checkbox-label">{{ dataItem.Name }}</label>
                      </ng-template>
                    </kendo-multiselect>

                  </td>

                  <td *ngIf="EditMode[f.LegalFundClassCommercialViewModel.Id] && c == 'Hot Issue Eligible'" class="tableItem">
                    <kendo-dropdownlist style="height: 29.5px;" [(ngModel)]="f.LegalFundClassCommercialViewModel.SubHotIssueId" [disabled]="!CanEdit && CanEditManagerStrategy" [defaultItem]="defaultItem" class="form-control  form-control-sm" [data]="LegalFundClasses.LiqHotIssue"
                      [filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
                    </kendo-dropdownlist>
                  </td>

                  <td [attr.colspan]=recordCount class="tableItem subheading" *ngIf="c == 'Redemptions'  && i<1">
                  </td>

                  <td [attr.colspan]=recordCount class="tableItem" *ngIf="c == 'Standard Redemptions'  && i<1"></td>

                  <td *ngIf="!EditMode[f.LegalFundClassCommercialViewModel.Id] && c == 'Frequency'" class="tableItem">{{f.LegalFundClassCommercialViewModel.RedsFrqncyName}}
                  </td>
                  <td *ngIf="EditMode[f.LegalFundClassCommercialViewModel.Id] && c == 'Frequency' " class="tableItem">
                    <kendo-dropdownlist style="height: 29.5px;" [(ngModel)]="f.LegalFundClassCommercialViewModel.RedsFrqncyId" [disabled]="!CanEdit && CanEditManagerStrategy" [defaultItem]="defaultItem" class="form-control  form-control-sm" [data]="LegalFundClasses.LiqRedsFrequency"
                      [filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
                    </kendo-dropdownlist>

                  </td>







                  <td *ngIf="!EditMode[f.LegalFundClassCommercialViewModel.Id] && c == 'Redemption Comments'" class="tableItem">{{f.LegalFundClassCommercialViewModel.RedemptionComments}}
                  </td>
                  <td *ngIf="EditMode[f.LegalFundClassCommercialViewModel.Id] && c == 'Redemption Comments' " class="tableItem">
                    <textarea *ngIf="EditMode" [(ngModel)]="f.LegalFundClassCommercialViewModel.RedemptionComments" [disabled]="!CanEdit && CanEditManagerStrategy" style="width:100%" kendoTextArea></textarea>

                  </td>

                </ng-container>
              </ng-container>
            </ng-container>
          </ng-container>

        </tr>
      </table>
    </div>
  </div>

Maybe this article will help you, recommend -> [css-tricks.com](https://css-tricks.com/position-sticky-and-table-headers/) — Grzegorz T., Jul 30 '19 at 15:37
I read it wrong ;) [scrolling horizontally](https://stackoverflow.com/a/1312678/10424385) — Grzegorz T., Jul 30 '19 at 15:47
In my case the sticky is working fine on the first table and not the scecond — Tom, Jul 30 '19 at 16:07

Grzegorz T. · Answer 1 · 2019-07-30T20:48:38.177

Take a look at my solution.

body {
  font: 16px Calibri;
}

.container {
  position: relative;
  overflow: hidden;
  margin-left: 0;
  width: 720px;
}

table {
  border-collapse: separate;
  border-top: 3px solid grey;
}

td,
th {
  margin: 0;
  border: 3px solid grey;
  border-top-width: 0px;
  white-space: nowrap;
}

div {
  width: 600px;
  overflow-x: scroll;
  margin-left: 5em;
  overflow-y: visible;
  padding-bottom: 1px;
}

.headcol {
  position: absolute;
  width: 5em;
  left: 0;
  top: auto;
  border-right: 0px none black;
  border-top-width: 3px;
  /*only relevant for first row*/
  margin-top: -3px;
  /*compensate for top border*/
}

.headcol:before {
  content: 'Row ';
}

.long {
  background: yellow;
  letter-spacing: 1em;
}

<div class="container">
  <div>
    <table>
      <tr>
        <th class="headcol">1</th>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
      <tr>
        <th class="headcol">2</th>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
      <tr>
        <th class="headcol">3</th>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
      <tr>
        <th class="headcol">4</th>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
      <tr>
        <th class="headcol">5</th>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
      <tr>
        <th class="headcol">6</th>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
    </table>
  </div>
  <div>
    <table>
      <tr>
        <th class="headcol">1</th>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
      <tr>
        <th class="headcol">2</th>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
      <tr>
        <th class="headcol">3</th>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
      <tr>
        <th class="headcol">4</th>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
      <tr>
        <th class="headcol">5</th>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
      <tr>
        <th class="headcol">6</th>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
    </table>
  </div>
</div>

Second example. One scroll scrolls two tables.

body {
  font: 16px Calibri;
}

.container {
  position: relative;
  overflow: hidden;
  margin-left: 0;
  width: 720px;
}

table {
  border-collapse: separate;
  border-top: 3px solid grey;
}

td,
th {
  margin: 0;
  border: 3px solid grey;
  border-top-width: 0px;
  white-space: nowrap;
}

div {
  width: 600px;
  overflow-x: scroll;
  margin-left: 5em;
  overflow-y: visible;
  padding-bottom: 1px;
}

.headcol {
  position: absolute;
  width: 5em;
  left: 0;
  top: auto;
  border-right: 0px none black;
  border-top-width: 3px;
  /*only relevant for first row*/
  margin-top: -3px;
  /*compensate for top border*/
}

.headcol:before {
  content: 'Row ';
}

.long {
  background: yellow;
  letter-spacing: 1em;
}

<div class="container">
  <div>
    <table>
      <tr>
        <th class="headcol">1</th>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
      <tr>
        <th class="headcol">2</th>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
      <tr>
        <th class="headcol">3</th>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
      <tr>
        <th class="headcol">4</th>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
      <tr>
        <th class="headcol">5</th>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
      <tr>
        <th class="headcol">6</th>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
    </table>

    <table>
      <tr>
        <th class="headcol">1</th>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
      <tr>
        <th class="headcol">2</th>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
      <tr>
        <th class="headcol">3</th>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
      <tr>
        <th class="headcol">4</th>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
      <tr>
        <th class="headcol">5</th>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
      <tr>
        <th class="headcol">6</th>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      </tr>
    </table>
  </div>
</div>

I am having similar issue as seen in your example. If I introduce horozintal scroll in my card-body class the sticky works but applying the horizontal scroll on the div enclosing the table shifts the entire table to the left. The reason why i have set the horizontal scroll on the div is because i have two tables and need to scroll both the tables together. Unfortunately the bottom table shifts completely to the left while the table on top works fine. — Tom, Jul 30 '19 at 19:58

Sticky headers on working on one table while scrolling horizontally

1 Answers1