Добавление вертикальной прокрутки в div, но возникают некоторые ошибки

#html #css

#HTML #css

Вопрос:

Добавление горизонтальной прокрутки в div, этот div содержит два раздела, оба имеют ширину около 4080 пикселей, из 2 разделов один div содержит таблицу с заголовком, а второй div содержит таблицу, имеющую <td> в <tr> , я хочу установить вертикальную прокрутку второго 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>

Ответ №1:

добавьте overflow-x: auto; в свой div, это добавит вертикальную полосу прокрутки

или попробуйте overflow: auto; это добавит полосу прокрутки с обеих сторон

вот рабочий пример

1. это добавит вертикальную прокрутку в div… но я хочу, чтобы div с id = Table имел только горизонтальную прокрутку без вертикальной прокрутки,,,,, но div с id = small имел только вертикальную полосу прокрутки, которая всегда остается в правой части экрана,,,, теперь, когда я просматриваю по горизонтали,,,,, посмотрите на картинку выше,,, это происходит, вертикальная полоса прокрутки смещается влево с данными

Ответ №2:

Вы можете использовать свойство 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>

1. я хочу, чтобы у div с id = «Table» была только горизонтальная прокрутка,,,,,, а у div с id = «small» была видна только вертикальная прокрутка,,,,, но также отображались горизонтальные данные при прокрутке с div id = «Table»,,,, но что происходит, так это то, что вертикальная полоса прокрутки также смещается влево с данными, а данные с правой стороны не видны