html - 向 div 添加垂直滚动但出现一些错误

Question

向一个 div 添加水平滚动，该 div 包含两个宽度都约为 4080px 的 div，在 2 个 div 中，一个 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>

Answer 1

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

或者试试 overflow: auto; 这会在两侧添加滚动条

这里正在工作ex