Angular 8表格前三列冻结实现求助（附现有代码）

To keep the first three columns (Voucher No., Voucher Date, Amount) fixed while letting the rest of the table scroll horizontally, we can use CSS position: sticky combined with fixed column widths. Here's a straightforward implementation:

Step 1: Add CSS Styles #

Paste these styles into your component's CSS file (e.g., your-component.component.css) or your global stylesheet:

/* Ensure the table container enables horizontal scrolling */
.table-responsive {
  overflow-x: auto;
  max-width: 100%;
}

/* Use fixed table layout to maintain consistent column widths */
.table {
  table-layout: fixed;
  width: 100%;
}

/* Define fixed widths for each column (adjust values to fit your content) */
.table th:nth-child(1), .table td:nth-child(1) { width: 150px; }
.table th:nth-child(2), .table td:nth-child(2) { width: 180px; }
.table th:nth-child(3), .table td:nth-child(3) { width: 120px; }
.table th:nth-child(4), .table td:nth-child(4) { width: 200px; }
.table th:nth-child(5), .table td:nth-child(5) { width: 180px; }
.table th:nth-child(6), .table td:nth-child(6) { width: 150px; }
.table th:nth-child(7), .table td:nth-child(7) { width: 250px; }

/* Apply sticky positioning to lock the first three columns */
.table th:nth-child(1), .table td:nth-child(1) {
  position: sticky;
  left: 0;
  background-color: #ffffff; /* Match your table's background color */
  z-index: 10; /* Keep header columns above body content */
}

.table th:nth-child(2), .table td:nth-child(2) {
  position: sticky;
  left: 150px; /* Equal to the width of the first column */
  background-color: #ffffff;
  z-index: 9;
}

.table th:nth-child(3), .table td:nth-child(3) {
  position: sticky;
  left: 330px; /* Sum of first two column widths (150 + 180) */
  background-color: #ffffff;
  z-index: 8;
}

/* Optional: Match header text color to your theme */
.table thead.text-info th {
  color: #17a2b8; /* Bootstrap's info color, tweak as needed */
}

Step 2: Keep Your Existing HTML Structure #

Your current HTML doesn’t need major changes—just ensure the .table-responsive div properly wraps the table. Here’s your original code (no edits required here):

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

Important Notes: #

• Adjust Widths: Tweak the column width values in the CSS to fit your content. Make sure the left values for the second and third columns match the sum of previous column widths to avoid overlapping.
• Background Color: Set background-color to match your table’s background (e.g., if your header has a custom color, use that for the th elements) so sticky columns don’t show content behind them when scrolling.
• Z-Index: The z-index values ensure header columns stay above body content during scrolling.

This method works seamlessly with your Angular 8 setup and doesn’t require extra libraries or complex directives.

内容的提问来源于stack exchange，提问作者user7356972