Заморозить три столбца в таблице (без возможности прокрутки) - PullRequest
Новая
       14

Заморозить три столбца в таблице (без возможности прокрутки)

2 голосов
/ 09 ноября 2019

Я использую Angular 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.

Спасибо

1 Ответ

3 голосов
/ 14 ноября 2019

Я сделал это с помощью 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, currentPage: rentalPage,  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>
...