如何让Ngx-datatable最后一列固定宽度，其余列平分剩余空间？

Hey there! Let's tackle this ngx-datatable layout issue you're facing. From your description, you want the first three columns to fill up the combined blue + black area, while the last action column only takes the space needed for its buttons (the red box area). Here's how to make that work:

Key Concept: Use ngx-datatable's Flex Layout Controls #

ngx-datatable uses flexbox under the hood, so we can leverage the flexGrow and width properties on columns to control space distribution. We’ll set the first three columns to share available space equally, and lock the last column to a fixed width that fits its content.

Step 1: Update Column Definitions #

Modify your column code to add flex and width settings:

<!-- First 3 columns: flexGrow:1 to split available space evenly -->
<ngx-datatable-column name="Header1" [flexGrow]="1" [headerClass]="getHeaderClass()" [cellClass]="getCellClass()">
  <ng-template let-column="column" ngx-datatable-header-template>{{ column.name }}</ng-template>
  <ng-template let-value="value" ngx-datatable-cell-template>{{ value }}</ng-template>
</ngx-datatable-column>

<ngx-datatable-column name="Header2" [flexGrow]="1" [headerClass]="getHeaderClass()" [cellClass]="getCellClass()">
  <ng-template let-column="column" ngx-datatable-header-template>{{ column.name }}</ng-template>
  <ng-template let-value="value" ngx-datatable-cell-template>{{ value }}</ng-template>
</ngx-datatable-column>

<ngx-datatable-column name="Header3" [flexGrow]="1" [headerClass]="getHeaderClass()" [cellClass]="getCellClass()">
  <ng-template let-column="column" ngx-datatable-header-template>{{ column.name }}</ng-template>
  <ng-template let-value="value" ngx-datatable-cell-template>{{ value }}</ng-template>
</ngx-datatable-column>

<!-- Last action column: flexGrow:0 to prevent expansion, fixed width for content -->
<ngx-datatable-column name="" [flexGrow]="0" [width]="150" [headerClass]="['header-padding', 'action-header']" [cellClass]="getCellActionClass()">
  <ng-template let-value="value" ngx-datatable-cell-template >
    <div class="text-right">
      <a href="javascript:;">
        <i class="fa fa-edit"></i>Edit
      </a>
      <a class="text-danger" href="javascript:;">
        <i class="far fa-trash-alt"></i>Remove
      </a>
    </div>
  </ng-template>
</ngx-datatable-column>

Step 2: Update Style Functions and CSS #

Adjust your class functions and add new styles to lock the action column and hide its empty header:

Update the cell action class function:

getCellActionClass = () => { return 'cell-font-size cell-action-class' };

Add these CSS rules:

.row-border { border-top: 1px solid #e2e2e2; }
.cell-font-size { font-size: 0.875rem !important; font-weight: 400 !important; padding: 0.3rem !important; }
.header-padding { padding-left: 0.3rem !important; }

/* Hide the empty header for the action column */
.action-header {
  display: none;
  padding: 0 !important;
}

/* Ensure the action column cell stays fixed width */
.cell-action-class {
  width: 150px !important;
  flex-shrink: 0; /* Prevent shrinking if table is too narrow */
}

How This Works: #

• [flexGrow]="1" on the first three columns tells them to split any available space evenly, filling up the blue + black area.
• [flexGrow]="0" and [width]="150" on the action column locks it to a fixed width (tweak 150 to match your button size) so it only takes the red box space.
• The action-header class hides the empty header for the action column, keeping your layout clean.
• flex-shrink:0 on the action cell ensures it doesn't get squeezed if the table is resized too small.

If you need to adjust the space distribution between the first three columns, you can change their flexGrow values (e.g., 2, 1, 1 to make the first column take half the space).

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