Блог

Я создал мат-таблицу с пагинатором, все это работает нормально, но у меня есть нежелательное пространство между ними, из-за которого таблица выглядит уродливо. Есть ли какой-то стиль, который я должен изменить для этого? Могу ли я использовать некоторые стили css или есть какие-либо предопределенные стили, которые я могу использовать, чтобы стиль таблицы был чистым. Это для проекта, поэтому я был бы очень признателен, если бы вы могли четко объяснить мне, какие изменения я должен внести в данный код.

Также моя тема по умолчанию фиолетово-зеленая.

Также будут ли какие-либо классы начальной загрузки работать для этого?

файл component.ts

 table mat-table class="table" matSort aria-label="Elements" [dataSource]="dataSource">

  <ng-container matColumnDef="Pt_Id">
      <th mat-header-cell *matHeaderCellDef >Patient Id</th>
      <td mat-cell *matCellDef="let row">{{row.Pt_Id}}</td>
  </ng-container>

  <ng-container matColumnDef="Pt_Name">
      <th mat-header-cell *matHeaderCellDef >Patient Name</th>
      <td mat-cell *matCellDef="let row">{{row.Pt_Name}}</td>
  </ng-container>

  <ng-container matColumnDef="Pt_Age">
      <th mat-header-cell *matHeaderCellDef >Patient Age</th>
      <td mat-cell *matCellDef="let row">{{row.Pt_Age}}</td>
  </ng-container>

  <ng-container matColumnDef="Department">
      <th mat-header-cell *matHeaderCellDef >Department</th>
      <td mat-cell *matCellDef="let row">{{row.Department}}</td>
  </ng-container>

  <ng-container matColumnDef="Docname">
      <th mat-header-cell *matHeaderCellDef >Doctor Name</th>
      <td mat-cell *matCellDef="let row">{{row.Docname}}</td>
  </ng-container>

  <ng-container matColumnDef="Pt_Email">
      <th mat-header-cell *matHeaderCellDef >Patient Email</th>
      <td mat-cell *matCellDef="let row">{{row.Pt_Email}}</td>
  </ng-container>

  <ng-container matColumnDef="Pt_Mob">
      <th mat-header-cell *matHeaderCellDef >Patient Mobile</th>
      <td mat-cell *matCellDef="let row">{{row.Pt_Mob}}</td>
  </ng-container>

  <ng-container matColumnDef="Options">
      <th mat-header-cell *matHeaderCellDef >Options</th>
      <td mat-cell *matCellDef="let row">
          <button type="button" class="btn btn-light mr-1"
              data-toggle="modal" data-target="#exampleModal"
              (click)="editClick(row)">
              Edit</button>
          <button type="button" class="btn btn-light mr-1"
              (click)="deleteClick(row)">
                  Delete</button>
      </td>
  </ng-container>

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

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

Вывод таблицы