table td height

Question

How do I keep the height of the table td when I click the select menu? because right now when I click the select menu is stretches the height of the table td or cell as you can see it did get bigger in height, I wanna only keep the original height when click the select menu. Any idea guys?

#when I click the menu it stretches the cell heigh

#html

<td (click)="editTableInputs(i, 'status')">
<mat-form-field style="width: 90px;" appearance="standard">
   <mat-select myDirective (openedChange)="openedChange($event, data, 'parent' , 'status')"
       [(value)]="data.status">
       <mat-option *ngFor="let status of statuses" [value]="status.viewValue"> {{status.viewValue}}
       </mat-option>
   </mat-select>
</mat-form-field>
</td>

#css

.table td {
  border: 1px solid #ddd;
  padding: 8px;
  font-weight: 400;
  font-size: 12px;
  font-family: 'Inter';
  line-height: 133.3%;
  height: 35px;
}

Answer 1

May be you can inspect the template, find the class in html tag. Then use the ng-deep

example:

::ng-deep.table td {
  border: 1px solid #ddd;
  padding: 8px;
  font-weight: 400;
  font-size: 12px;
  font-family: 'Inter';
  line-height: 133.3%;
  height: 35px;
}

This is the way i usually use to change something specified.

good luck!