css - 如何使用 Angular Material 表使表中的按钮响应

Question

我需要让我的按钮在表格内响应。 这分别是我的桌面和移动 View 中的样子:

桌面 View

移动 View

如您所见，在移动 View 中，删除按钮已被部分覆盖。

我的html是这样写的

    <div class="col-md-8">
        <div class="col-md-12">
            <div class="design-header">
            <mat-form-field>
                <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
            </mat-form-field>
            </div>
            <div class="design-container mat-elevation-z8" *ngIf="billTypeList">

            <mat-table [dataSource]="dataSource" matSort style="width: 100%">
                <ng-container matColumnDef="BillName">
                    <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
                    <mat-cell *matCellDef="let row"> {{row.BillName}} </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="ConsumptionAbbr">
                    <mat-header-cell *matHeaderCellDef mat-sort-header> Abbreviation </mat-header-cell>
                    <mat-cell *matCellDef="let row"> {{row.ConsumptionAbbr}} </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="DateAdded">
                    <mat-header-cell *matHeaderCellDef mat-sort-header> Date Added </mat-header-cell>
                    <mat-cell *matCellDef="let row"> {{row.PostingDateTime | date}} </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="Action">
                    <mat-header-cell *matHeaderCellDef mat-sort-header> Delete </mat-header-cell>
                    <mat-cell *matCellDef="let row" [style.color]="row.color">
                        <button mat-raised-button class="btn btn-danger" (click)="deleteBillType(row.BillTypeID)">Delete</button>
                    </mat-cell>
                    </ng-container>

                <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                <mat-row *matRowDef="let row; columns: displayedColumns;">
                </mat-row>
            </mat-table>

            <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
            </div>
        </div>
    </div>

Can you please show me how to do this right? 

**UPDATE**
This did not work too.
<div class="table-reponsive">
    <mat-table [dataSource]="dataSource" matSort>

    <ng-container matColumnDef="MonthNo">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Month </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.MonthNo}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="RatePerSqm">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Rate Per Sq. M. </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.RatePerSqm}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="FixedAmount">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Fixed Amount </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.FixedAmount | currency: 'PHP '}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="EffectiveDate">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Effective Date </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.EffectiveDateTime | date}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="Action">
        <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>
        <mat-cell *matCellDef="let row" [style.color]="row.color">
        <button class="btn btn-primary" (click)="deleteRealPropertyTaxRate(row.RealPropertyTaxRateID)">Delete Record</button>
        <button  class="btn btn-primary" (click)="onEdit(row)">Edit Record</button>
        <!-- <button mat-icon-button [matMenuTriggerFor]="menu">
            <mat-icon>more_horiz</mat-icon>
        </button>
        <mat-menu #menu="matMenu">
            <button mat-menu-item (click)="onEdit(row)">
            <mat-icon>edit</mat-icon>
            <span>Edit</span>
            </button>
            <button mat-menu-item (click)="deleteRealPropertyTaxRate(row.RealPropertyTaxRateID)">
            <mat-icon>delete_sweep</mat-icon>
            <span>Delete</span>
            </button>
        </mat-menu> -->
        </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;">
    </mat-row>
    </mat-table>
</div>

使用类表响应式并没有达到目的。

Answer 1

我已尝试在下表中复制您的场景。关键是使用 Bootstrap 中的“table-responsive”类。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<table class="table table-condensed table-responsive">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Date</th>
      <th> Actions </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>November 14, 2012</td>
      <td> <button type="button" class="btn btn-danger">Danger</button> </td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>November 14, 2012</td>
      <td> <button type="button" class="btn btn-danger">Danger</button> </td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>November 14, 2012</td>
      <td> <button type="button" class="btn btn-danger">Danger</button> </td>
    </tr>
  </tbody>
</table>