向div添加垂直滚动但发生了一些错误

时间：2016-10-22 12:04:02

标签： html css

向div添加水平滚动，该div包含两个div，宽度约为4080px，2个div，一个div包含一个带有标题的表，第二个div包含<td>中<tr>的表，我想设置第二个div的垂直滚动，以便我可以看到整个表数据。

Screen shot

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

将overflow-x: auto;添加到您的div，这将添加垂直滚动条

或尝试overflow: auto;这会向两侧添加滚动条

此处正在运作ex

答案 1 :(得分：0)

你可以使用css overflow属性样式你的div为id = small 垂直滚动，如下所示

display: block;width: 100%;bottom: 0px;overflow-y: scroll;width:4080px

你可以使用css overflow属性样式你的div为id = small 水平滚动，如下所示

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>

相关问题
最新问题