CODEWITHSUNDEEP
htmlcssangularangular-material
user7356972
user7356972

Reputation: 58

Freeze three column in table (unscrollable)

I'm using angular 8. I need to fix first three column position of table to make it non-scroll able, this is my recent code:

<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>

I need to freeze Voucher No.,Voucher Date and Amount.

Thank you

Upvotes: 0

Views: 73

Answers (1)

Avi
Avi

Reputation: 1594

I did it by using d-flex class bootstrap. I divided them into two different div which is to be scrolled and different div for non scroll.

<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>

Upvotes: 1

Related Questions