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