实现Angular Material表格行滚动并保持表头固定的问题求助

Hey Ross, let's get that fixed table header with vertical scrolling working for your Angular Material table! The core issue here is that your table container isn't constrained to a fixed height (so it just grows with rows) and the header isn't set to stay in place when scrolling. Here's how to fix it step by step:

1. Update Your CSS for Scrolling & Fixed Header #

Add these styles to your component's CSS file (or global styles if needed):

/* Container to constrain height and enable scrolling */
.table-container {
  max-height: 400px; /* Adjust this value to fit exactly 5 rows + header */
  overflow-y: auto;
  border: 1px solid rgba(0,0,0,0.12); /* Optional: match Material's table border */
}

/* Make header stick to the top when scrolling */
.mat-header-row {
  position: sticky;
  top: 0;
  background-color: #ffffff; /* Match your background to cover content below */
  z-index: 1; /* Ensure header stays above table rows */
}

/* Optional: Remove default margin/padding to prevent gaps */
.mat-table {
  width: 100%;
  margin: 0;
}

2. Optimize the Row Addition Logic #

Your current doAddRow function works, but we can make it more efficient by avoiding creating a new MatTableDataSource every time. Update it to:

private doAddRow() {
  // Add new row to existing data array
  this.dataSource.data = [
    ...this.dataSource.data,
    { code: '', type: '', reference: '' }
  ];
  // No need to reinitialize the data source - this triggers the table update automatically
}

3. Remove the Paginator (Optional but Recommended) #

Since you want vertical scrolling instead of pagination, you can remove the <mat-paginator> section from your HTML. If you want to keep it for some reason, adjust the container's max-height to account for the paginator's space.

4. Verify the Scroll Behavior #

Once you apply these changes:

• Adding rows will fill the container until it hits the max-height you set
• Once the total row height exceeds the container, a vertical scrollbar will appear
• The header will stay fixed at the top while you scroll through the rows

This works because:

• The max-height on .table-container stops the container from growing indefinitely
• overflow-y: auto enables the scrollbar when content overflows
• position: sticky on the header row locks it to the top of the container as you scroll

Let me know if you need to tweak the height value or adjust any styling to match your exact design!

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