前端之家

  1. 首页
  2. 问答

冻结表中的三列（不可滚动）

• 问答

我使用的是角度8。我需要修复表格的前三列位置，使其无法滚动， 这是我最近的代码：

<mat-tab label="Rental details">                  
  <div class="table-responsive" *ngIf="!rentLoader" >
    <table class="table">
      <thead class="text-info">
        <tr>
          <th>Voucher No.</th>
          <th>Voucher Date</th>
          <th>Amount</th>
          <th>Mode Of deduction</th>
          <th>Deduction Date</th>
          <th>Deduction Amount</th>
          <th>Remarks</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let rentals of rentalDetailsList | paginate: { itemsPerPage: 10,currentPage: rentalPage,id: 'rentalPagination'}">
          <td>{{rentals.Voucher_No}}</td>
          <td>{{rentals.Voucher_Date | date : 'short'}}</td>
          <td>&#8377; {{rentals.Amount}}</td>
          <td>{{rentals['Mode of deduction']}}</td>
          <td>{{rentals['Deduction Date']}}</td>
          <td>&#8377; {{rentals['Deduction Amount']}}</td>
          <td>{{rentals.Remarks}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="text-center" *ngIf="rentalDetailsList.length == 0 && !rentLoader">
    No data found.
  </div>
</mat-tab>

我需要冻结Voucher No.，Voucher Date和Amount。

谢谢

za80967190 回答：冻结表中的三列（不可滚动）

我通过使用d-flex类引导程序做到了。 我将它们分为两个要滚动的div和一个非滚动的div。

<div class="d-flex">
  <div class="table-nowrap" *ngIf="!rentLoader">
    <table class="table">
      <thead class="text-info">
        <tr>
          <th>Voucher No.</th>
          <th>Voucher Date</th>
          <th>Amount</th>
        </tr>
      </thead>
      <tbody>
        <tr
          *ngFor="let rentals of rentalDetailsList | paginate: { itemsPerPage: 10,currentPage: rentalPage,id: 'rentalPagination'}">
          <td>{{rentals.Voucher_No}}</td>
          <td>{{rentals.Voucher_Date | date : 'short'}}</td>
          <td>&#8377; {{rentals.Amount}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="table-responsive" *ngIf="!rentLoader">
    <table class="table">
      <thead class="text-info">
        <tr>
          <th>Mode Of deduction</th>
          <th>Deduction Date</th>
          <th>Deduction Amount</th>
          <th>Remarks</th>
        </tr>
      </thead>
      <tbody>
        <tr
          *ngFor="let rentals of rentalDetailsList | paginate: { itemsPerPage: 10,id: 'rentalPagination'}">
          <td>{{rentals['Mode of deduction']}}</td>
          <td>{{rentals['Deduction Date']}}</td>
          <td>&#8377; {{rentals['Deduction Amount']}}</td>
          <td>{{rentals.Remarks}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
angularangular-materialcsshtml
本文链接：https://www.f2er.com/3133075.html

大家都在问