Как убрать границы углового материала стола? - PullRequest
Новая
       26

Как убрать границы углового материала стола?

0 голосов
/ 28 марта 2019

Я сделал таблицу угловых материалов, и когда я уменьшаю масштаб, я вижу некоторые границы всей таблицы, которые я не знаю, почему они есть. Я действительно не хочу видеть их какие-либо идеи, что делать ??

[1]: https://ibb.co/56mhnKs это ссылка на мой скриншот, чтобы вы могли видеть, какие границы я имею в виду.

Итак, как вы можете видеть на скриншоте, я хочу удалить верхнюю и нижнюю огромную границу.

Это мой код 

<div class="table-responsive">
  <div class="tickets-table" style="width: 85%; max-width: 1600px; border: white">
    <table mat-table class="table-striped" style="width: 100%" [dataSource]="dataSource" matSort aria-label="Elements">
      <tbody>
      <!-- Id Column -->
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Ticket ID</th>
        <a><td mat-cell *matCellDef="let row">{{row.id}}</td></a>
      </ng-container>

      <!-- Subject Column -->
      <ng-container matColumnDef="subject">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Title/Subject</th>
        <a><td mat-cell *matCellDef="let row">{{row.subject}}</td></a>
      </ng-container>

      <!-- Last updated Column -->
      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Last updated</th>
        <a><td mat-cell *matCellDef="let row">{{row.created}}</td></a>
      </ng-container>

      <!-- Status Column -->
      <ng-container matColumnDef="created">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
        <a><td mat-cell *matCellDef="let row">{{row.status}}</td></a>
      </ng-container>

      <!--Header-->
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row (click)="selectRow(row.id)" *matRowDef="let row; columns: displayedColumns;"></tr>
      </tbody>
    </table>

Это CSS. Также, если бы вы могли рассказать мне, как сделать белую рамку вокруг стола, было бы неплохо. 

.tickets-table {
  overflow: auto;
  margin: 40px auto;
  /*position: relative;*/
  padding-right: 15px;
  padding-left: 15px;
  border: white;
  align-self: stretch;

}

.mat-header-cell {
  color: white;
  background-color: #000046;
  padding: 20px;
  border-color: white;
  align-self: stretch;
}

.mat-cell {
  width: fit-content;
  height: 1px;
  border-color: white;
  align-self: stretch;
}

.mat-row:nth-child(even){
  background-color: #000051;
}

.mat-row:nth-child(odd){
  background-color: #303061;
}

1 Ответ

2 голосов
/ 22 мая 2019 

td.mat-cell{
    border-bottom-style: none;
}

th.mat-header-cell{
    border-bottom-style: none;
}
...