Question

我做了一个有角度的材料桌子，当我缩小时，我看到了整个桌子的一些边框，我不知道为什么在那里。我真的不想看到他们有什么想法做什么？

[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;
}

Answer 1

我发现一个更清洁的解决方案是像这样将仰角设置为0

<table mat-table class="mat-elevation-z0">

Answer 2

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

Answer 3

如果您改用mat-table，则只需执行以下操作

mat-header-row, mat-row{
  border-bottom-style: none;
}

如何删除棱角物料台的边框？

3 个答案: