添加垂直滚动到的div但一些错误存在的
问题描述：
添加水平滚动到一个div，即div包含两个div都具有宽度大约4080px，2周的div一个div包含一个具有标题表，并且第二div包含具有<td>表中<tr>，我想设置第二个div的垂直滚动，这样我可以看到整个表的数据。添加垂直滚动到的div但一些错误存在的
<div class="CodeMirror cm-s-default CodeMirror-wrap">
<div class="CodeMirror-vscrollbar" cm-not-content="true" style="display: block; bottom: 0px;overflow-y: hidden;">
<div id="Table">
<!--<div class="CodeMirror cm-s-default CodeMirror-wrap" style="height: 50px;">-->
<!--<div class="CodeMirror-vscrollbar" cm-not-content="true" style="height: 50px;overflow-x: hidden;overflow-y: hidden;">-->
<!--<div style="width: 100%;">-->
<table >
<tr>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 82px;">Zone Name</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 146px;">Region Name</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 118px; margin: auto;">Branch Name</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 88px;">Delivery No</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 115px;">Ext Delivery No</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 85px;">Consignment Date</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 132px;">Customer Name</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 52px;">Booking Net Wt</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 52px;">Booking Gross Wt</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 46px;">POD Weight</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 52px;">Booking Pakgs</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 52px;">Delivery Pkgs</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 69px;">Containing</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 150px;">Pod Received Branch</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 92px;">Pod Received Date</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 132px;">Pod Received By</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 145px;">Pod Punch By</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 92px;">Pod Punch On</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 58px;">POD Damage Remarks</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 90px;">POD Shortage Remarks</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 56px;">Insured By</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 90px;">SAPContract ID</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 73px;">LTBDClaim</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 115px;">Challan No</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 85px;">Challan Date</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 98px;">Vehicle No</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 57px;">Balance Payment No</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 85px;">Balance Payment Date</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 112px;">BPBranch</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 52px;">Lorry Hire Balance</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 125px;">Invoice No</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 85px;">Invoice Date</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 50px;">Invoice Weight</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 90px;">Settlement No</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 88px;">Settlement Date</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 90px;">Claim Recovery Doc No</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 86px;">Claim Recovery Date</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 59px;">Claim Recovery</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 86px;">COF Issued Date</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 63px;">Sap Insurance Claim No</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 72px;">Claim Workbench Remarks</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 250px; text-align: center;">Fwd Agent</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 50px;">Broker Detail</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 50px;">Owner Detail</div></th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style=" width: 100px;">Comment</div></th>
</tr>
</table>
<!--</div>-->
<!--</div>-->
<!--</div>-->
<div class="CodeMirror-vscrollbar" [class.tableDiv]=hideDiv id="small" cm-not-content="false" style="display: block;width: 100%;bottom: 0px;overflow-x: hidden;">
<table >
<tr *ngFor="let obj of podData;let i=index">
<td style="border: 1px solid black;text-align:center"><div style="width: 82px;">{{obj.ZoneName}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 146px;">{{obj.RegionName}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 118px; margin: auto;">{{obj.BranchName}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 88px;">{{obj.DeliveryNo}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 115px;">{{obj.ExtDeliveryNo}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 85px;">{{dateFormat2(obj.ConsignmentDate)}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 132px;">{{obj.CustomerName}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 52px;">{{obj.BookingNetWt}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 52px;">{{obj.BookingGrossWt}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 46px;">{{obj.PODWeight}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 52px;">{{obj.BookingPakgs}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 52px;">{{obj.DeliveryPkgs}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 69px;">{{obj.Containing}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 150px;">{{obj.PodReceivedBranch}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 92px;">{{dateFormat2(obj.PodReceivedDate)}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 132px;">{{obj.PodReceivedBy}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 145px;">{{obj.PodPunchBy}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 92px;">{{dateFormat2(obj.PodPunchOn)}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 58px;">{{obj.PODDamageRemarks}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 90px;">{{obj.PODShortageRemarks}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 56px;">{{obj.InsuredBy}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 90px;">{{obj.SAPContractID}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 73px;">{{obj.LTBDClaim}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 115px;">{{obj.ChallanNo}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 85px;">{{obj.ChallanDate}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 98px;">{{obj.VehicleNo}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 57px;">{{obj.BalancePaymentNo}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 85px;">{{obj.BalancePaymentDate}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 112px;">{{obj.BPBranch}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 52px;">{{obj.LorryHireBalance}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 125px;">{{obj.InvoiceNo}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 85px;">{{dateFormat2(obj.InvoiceDate)}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 50px;">{{obj.InvoiceWeight}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 90px;">{{obj.SettlementNo}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 88px;">{{obj.SettlementDate}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 90px;">{{obj.ClaimRecoveryDocNo}}</div></td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 86px;">{{obj.ClaimRecoveryDate}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 59px;">{{obj.ClaimRecovery}}</div></td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 86px;">{{obj.COFIssuedDate}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 63px;">{{obj.SapInsuranceClaimNo}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 72px;">{{obj.ClaimWorkbenchRemarks}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 250px; text-align: center;">{{obj.FwdAgent}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 50px;">{{obj.BrokerDetail}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style="width: 50px;">{{obj.OwnerDetail}}</div></td>
<td style="border: 1px solid black;text-align:center"><div style=" width: 100px;">
<!--<textarea style="width: 100%;height: 100%;border: 0px;z-index: 200" [(ngModel)]='textArea[i]'>-->
<!--</textarea><div class="hide">{{textArea[i]}}</div>-->
<textarea style="resize: none;width: 100%;height: 100%;border: 0px;z-index: 200" maxlength="200" [(ngModel)]='comments[i].commnts' (keyup)="getCommObj(comments[i])">
</textarea></div><div class="hide">{{comments[i].commnts}}</div>
</td>
</tr>
</table>
</div>
</div>
</div>
答
您可以使用CSS overflow属性的风格你的div id为小为垂直滚动如下
display: block;width: 100%;bottom: 0px;overflow-y: scroll;width:4080px
您可以使用CSS overflow属性的风格你的div id为小为水平滚动如下
display: block;width: 100%;bottom: 0px;overflow-x: scroll;width:4080px
不过从图片，我看到你想垂直和水平滚动
display: block;width: 100%;bottom: 0px;overflow: scroll;width:4080px
摘录如下
<table id="t1">
<tr>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 82px;">Zone Name</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 146px;">Region Name</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 118px; margin: auto;">Branch Name</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 88px;">Delivery No</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 115px;">Ext Delivery No</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 85px;">Consignment Date</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 132px;">Customer Name</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 52px;">Booking Net Wt</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 52px;">Booking Gross Wt</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 46px;">POD Weight</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 52px;">Booking Pakgs</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 52px;">Delivery Pkgs</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 69px;">Containing</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 150px;">Pod Received Branch</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 92px;">Pod Received Date</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 132px;">Pod Received By</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 145px;">Pod Punch By</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 92px;">Pod Punch On</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 58px;">POD Damage Remarks</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 90px;">POD Shortage Remarks</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 56px;">Insured By</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 90px;">SAPContract ID</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 73px;">LTBDClaim</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 115px;">Challan No</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 85px;">Challan Date</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 98px;">Vehicle No</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 57px;">Balance Payment No</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 85px;">Balance Payment Date</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 112px;">BPBranch</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 52px;">Lorry Hire Balance</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 125px;">Invoice No</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 85px;">Invoice Date</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 50px;">Invoice Weight</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 90px;">Settlement No</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 88px;">Settlement Date</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 90px;">Claim Recovery Doc No</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 86px;">Claim Recovery Date</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 59px;">Claim Recovery</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 86px;">COF Issued Date</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 63px;">Sap Insurance Claim No</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 72px;">Claim Workbench Remarks</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 250px; text-align: center;">Fwd Agent</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 50px;">Broker Detail</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style="width: 50px;">Owner Detail</div>
</th>
<th style="background-color:SteelBlue; color:white; border: 1px solid white; font-size: 14px; font-weight: initial;text-align:center">
<div style=" width: 100px;">Comment</div>
</th>
</tr>
</table>
<div class="CodeMirror-vscrollbar" [class.tableDiv]=hideDiv id="small" cm-not-content="false" style="display: block;width: 100%;bottom: 0px;overflow: scroll;width:4080px">
<table id='t2'>
<td style="border: 1px solid black;text-align:center">
<div style="width: 85px;">{{dateFormat2(obj.ConsignmentDate)}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 132px;">{{obj.CustomerName}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 52px;">{{obj.BookingNetWt}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 52px;">{{obj.BookingGrossWt}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 46px;">{{obj.PODWeight}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 52px;">{{obj.BookingPakgs}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 52px;">{{obj.DeliveryPkgs}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 69px;">{{obj.Containing}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 150px;">{{obj.PodReceivedBranch}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 92px;">{{dateFormat2(obj.PodReceivedDate)}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 132px;">{{obj.PodReceivedBy}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 145px;">{{obj.PodPunchBy}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 92px;">{{dateFormat2(obj.PodPunchOn)}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 58px;">{{obj.PODDamageRemarks}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 90px;">{{obj.PODShortageRemarks}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 56px;">{{obj.InsuredBy}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 90px;">{{obj.SAPContractID}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 73px;">{{obj.LTBDClaim}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 115px;">{{obj.ChallanNo}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 85px;">{{obj.ChallanDate}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 98px;">{{obj.VehicleNo}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 57px;">{{obj.BalancePaymentNo}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 85px;">{{obj.BalancePaymentDate}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 112px;">{{obj.BPBranch}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 52px;">{{obj.LorryHireBalance}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 125px;">{{obj.InvoiceNo}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 85px;">{{dateFormat2(obj.InvoiceDate)}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 50px;">{{obj.InvoiceWeight}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 90px;">{{obj.SettlementNo}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 88px;">{{obj.SettlementDate}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 90px;">{{obj.ClaimRecoveryDocNo}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 86px;">{{obj.ClaimRecoveryDate}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 59px;">{{obj.ClaimRecovery}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 86px;">{{obj.COFIssuedDate}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 63px;">{{obj.SapInsuranceClaimNo}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 72px;">{{obj.ClaimWorkbenchRemarks}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 250px; text-align: center;">{{obj.FwdAgent}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 50px;">{{obj.BrokerDetail}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 50px;">{{obj.OwnerDetail}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style=" width: 100px;">
<!--<textarea style="width: 100%;height: 100%;border: 0px;z-index: 200" [(ngModel)]='textArea[i]'>-->
<!--</textarea><div class="hide">{{textArea[i]}}</div>-->
<textarea style="resize: none;width: 100%;height: 100%;border: 0px;z-index: 200" maxlength="200" [(ngModel)]='comments[i].commnts' (keyup)="getCommObj(comments[i])">
</textarea>
</div>
<div class="hide">{{comments[i].commnts}}</div>
</td>
</tr>
<tr *ngFor="let obj of podData;let i=index">
<td style="border: 1px solid black;text-align:center">
<div style="width: 82px;">{{obj.ZoneName}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 146px;">{{obj.RegionName}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 118px; margin: auto;">{{obj.BranchName}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 88px;">{{obj.DeliveryNo}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 115px;">{{obj.ExtDeliveryNo}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 85px;">{{dateFormat2(obj.ConsignmentDate)}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 132px;">{{obj.CustomerName}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 52px;">{{obj.BookingNetWt}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 52px;">{{obj.BookingGrossWt}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 46px;">{{obj.PODWeight}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 52px;">{{obj.BookingPakgs}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 52px;">{{obj.DeliveryPkgs}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 69px;">{{obj.Containing}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 150px;">{{obj.PodReceivedBranch}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 92px;">{{dateFormat2(obj.PodReceivedDate)}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 132px;">{{obj.PodReceivedBy}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 145px;">{{obj.PodPunchBy}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 92px;">{{dateFormat2(obj.PodPunchOn)}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 58px;">{{obj.PODDamageRemarks}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 90px;">{{obj.PODShortageRemarks}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 56px;">{{obj.InsuredBy}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 90px;">{{obj.SAPContractID}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 73px;">{{obj.LTBDClaim}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 115px;">{{obj.ChallanNo}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 85px;">{{obj.ChallanDate}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 98px;">{{obj.VehicleNo}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 57px;">{{obj.BalancePaymentNo}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 85px;">{{obj.BalancePaymentDate}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 112px;">{{obj.BPBranch}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 52px;">{{obj.LorryHireBalance}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 125px;">{{obj.InvoiceNo}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 85px;">{{dateFormat2(obj.InvoiceDate)}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 50px;">{{obj.InvoiceWeight}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 90px;">{{obj.SettlementNo}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 88px;">{{obj.SettlementDate}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 90px;">{{obj.ClaimRecoveryDocNo}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 86px;">{{obj.ClaimRecoveryDate}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 59px;">{{obj.ClaimRecovery}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 86px;">{{obj.COFIssuedDate}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 63px;">{{obj.SapInsuranceClaimNo}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 72px;">{{obj.ClaimWorkbenchRemarks}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 250px; text-align: center;">{{obj.FwdAgent}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 50px;">{{obj.BrokerDetail}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style="width: 50px;">{{obj.OwnerDetail}}</div>
</td>
<td style="border: 1px solid black;text-align:center">
<div style=" width: 100px;">
<textarea style="resize: none;width: 100%;height: 100%;border: 0px;z-index: 200" maxlength="200" [(ngModel)]='comments[i].commnts' (keyup)="getCommObj(comments[i])">
</textarea>
</div>
<div class="hide">{{comments[i].commnts}}</div>
</td>
</tr>
</table>
</div>+0
,,,,,,和DIV使用id =“小”到只有垂直滚动可见,,,,,也显示水平数据时滚动使用DIV ID =“表” ,,,,但whtat是怎么回事是垂直滚动条也左移与数据和右侧数据不可见 –
这将增加垂直滚动到div的...但我想用ID的div =表只具有水平滚动没有vertiacal滚动,,,, ，但DIV使用id =小到只有垂直滚动条总是留下来，屏幕右侧,,,,现在，当我scroling horizontaly ,,,,,看看上面的图片,,,这是怎么回事垂直滚动杆被移左侧与我想使用id =“表格” div来仅具有水平滚动数据 –