水平滚动时在一张桌子上工作时出现粘滞标题

时间:2019-07-30 15:19:08

标签: html css angular

我有两个表,一个是表1,另一个是表2。我冻结了垂直显示的列标题。因此,当用户水平滚动时,标头保持静态。我已将属性粘滞性应用于th元素,如css中所示。我将两个表封闭在一个div下,并分配了类scrollHorizo​​ntal,以便用户水平滚动时,两个表一起移动。不幸的是,当用户水平滚动时,只有第一个表格列粘住了,底部的表格却没有。谁能告诉我原因

屏幕截图 enter image description here

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>

1 个答案:

答案 0 :(得分:0)

看看我的解决方案。

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>

第二个例子。 一键滚动可滚动两个表。

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>