Question

我有这个垫子桌子女巫，其中有一个可扩展的元素，其中包含另一个这样的表：

但是正如您所看到的，我在边界中有这些空间。如何对齐第二张桌子以获得全宽？我需要对齐两个表。所以我的主表是一个主行，第二个表在可扩展元素中是从属行。

请帮助我。我试图更改某些CSS样式，但没有任何效果。也许是因为mat元素或与ExpandedElement有关？

HTML：

<!-- Primeira tabela - Macros -->
<div class="mat-elevation-z8">
  <table mat-table [dataSource]="this.dataSource" multiTemplateDataRows class="mat-elevation-z8">

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

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

    <ng-container matColumnDef="PROC">
      <th mat-header-cell *matHeaderCellDef> PROCES_ID </th>
      <td mat-cell *matCellDef="let data"> {{data.PROC_ID}} </td>
    </ng-container>

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

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

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

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

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

    <ng-container matColumnDef="START">
      <th mat-header-cell *matHeaderCellDef> START </th>
      <td mat-cell *matCellDef="let row"><button class="btn btn-success" (click)="onStart(row)" [disabled]="this.started">Start</button></td>
    </ng-container>

    <ng-container matColumnDef="STOP">
      <th mat-header-cell *matHeaderCellDef> STOP </th>
      <td mat-cell *matCellDef="let row"><button class="btn btn-danger" (click)="onStop(row)">Stop</button></td>
    </ng-container>

    <ng-container matColumnDef="SKIP">
      <th mat-header-cell *matHeaderCellDef> SKIP </th>
      <td mat-cell *matCellDef="let row"><button class="btn btn-secondary" (click)="onSkip(row)">Skip</button></td>
    </ng-container>

    <ng-container matColumnDef="LOG">
      <th mat-header-cell *matHeaderCellDef> LOG </th>
      <td mat-cell *matCellDef="let row"><button class="btn btn-info" (click)="onLog(row)" [disabled]="true">Log</button></td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let element; columns: displayedColumns;" class="example-element-row"
      [class.example-expanded-row]="expandedElement === element" [ngClass]="{
        'is-white': element.STATUS === 'S',
        'is-blue': element.STATUS === 'W',
        'is-red': element.STATUS === 'E',
        'is-green': element.STATUS === 'F'
      }"
      (click)="onRowClicked(element)"></tr>
    <!-- (click)="log_message = onElementExpand(element); expandedElement = element;" -->
    <!-- <tr mat-row *matRowDef="let row; columns: displayedColumns" (click)="onRowClicked(row)"></tr> -->
  </table>

  <mat-toolbar>
    <mat-toolbar-row>
      <button class="btn btn-primary" (click)="onRefresh()" [disabled]="false">{{ 'button.Refresh' |
        translate }}</button>
      <span class="example-spacer"></span>
      <!-- <mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100]" showFirstLastButtons></mat-paginator> -->
    </mat-toolbar-row>
  </mat-toolbar>
</div>

<hr>

<!-- Segunda tabela, Scirpts com a thread 0-->

<div class="mat-elevation-z8">
  <table mat-table [dataSource]="this.dataSource2" multiTemplateDataRows class="mat-elevation-z8">

    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->
    <ng-container matColumnDef="expandedDetail">
      <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
        <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
         <!--  <div class="example-element-description">

            <div class="mat-elevation-z8"> -->

              <!-- Terceira tabela, Scripts com as restantes thread's-->
              <table mat-table [dataSource]="this.dataSource3" multiTemplateDataRows class="mat-elevation-z8">

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

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

    <ng-container matColumnDef="PROC">
      <th mat-header-cell *matHeaderCellDef> PROCES_ID </th>
      <td mat-cell *matCellDef="let data"> {{data.PROC_ID}} </td>
    </ng-container>

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

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

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

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

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

    <ng-container matColumnDef="START">
      <th mat-header-cell *matHeaderCellDef> START </th>
      <td mat-cell *matCellDef="let row"><button class="btn btn-success" (click)="onStart(row)" [disabled]="data.SHOW_START_BUTTON === 'N'">Start</button></td>
    </ng-container>

    <ng-container matColumnDef="STOP">
      <th mat-header-cell *matHeaderCellDef> STOP </th>
      <td mat-cell *matCellDef="let row"><button class="btn btn-danger" (click)="onStop(row)" [disabled]="data.SHOW_STOT_BUTTON === 'N'">Stop</button></td>
    </ng-container>

    <ng-container matColumnDef="SKIP">
      <th mat-header-cell *matHeaderCellDef> SKIP </th>
      <td mat-cell *matCellDef="let row"><button class="btn btn-secondary" (click)="onSkip(row)" [disabled]="data.SHOW_SKIP_BUTTON === 'N'">Skip</button></td>
    </ng-container>

    <ng-container matColumnDef="LOG">
      <th mat-header-cell *matHeaderCellDef> LOG </th>
      <td mat-cell *matCellDef="let row"><button class="btn btn-info" (click)="onLog(row)" [disabled]="data.SHOW_LOG_BUTTON === 'N'">Log</button></td>
    </ng-container>

    <!-- <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr> -->
    <tr mat-row *matRowDef="let element; columns: displayedColumns;" class="example-element-row"
      [class.example-expanded-row]="expandedElement === element" [ngClass]="{
                    'is-white': element.STATUS === 'S',
                    'is-blue': element.STATUS === 'W',
                    'is-red': element.STATUS === 'E',
                    'is-green': element.STATUS === 'F'
                  }"></tr>
    <!-- (click)="onRowClicked(element)" -->
    <!-- (click)="log_message = onElementExpand(element); expandedElement = element;" -->
    <!-- <tr mat-row *matRowDef="let row; columns: displayedColumns" (click)="onRowClicked(row)"></tr> -->
  </table>

  <!--  <mat-toolbar>
    <mat-toolbar-row> -->
  <!-- <button class="btn btn-primary" (click)="onRefresh()" [disabled]="false">{{ 'button.Refresh' |
        translate }}</button> -->
  <!-- <span class="example-spacer"></span> -->
  <!-- <mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100]" showFirstLastButtons></mat-paginator> -->
  <!--  </mat-toolbar-row>
  </mat-toolbar> -->
</div>
<!-- </div>
</div> -->
</td>
</ng-container>

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

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

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

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

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

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

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

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

<ng-container matColumnDef="START">
  <th mat-header-cell *matHeaderCellDef> START </th>
  <td mat-cell *matCellDef="let data"><button class="btn btn-success" (click)="onStart(data)" [disabled]="data.SHOW_START_BUTTON === 'N'">Start</button></td>
</ng-container>

<ng-container matColumnDef="STOP">
  <th mat-header-cell *matHeaderCellDef> STOP </th>
  <td mat-cell *matCellDef="let data"><button class="btn btn-danger" (click)="onStop(data)" [disabled]="data.SHOW_STOP_BUTTON === 'N'">Stop</button></td>
</ng-container>

<ng-container matColumnDef="SKIP">
  <th mat-header-cell *matHeaderCellDef> SKIP </th>
  <td mat-cell *matCellDef="let data"><button class="btn btn-secondary" (click)="onSkip(data)" [disabled]="data.SHOW_SKIP_BUTTON === 'N'">Skip</button></td>
</ng-container>

<ng-container matColumnDef="LOG">
  <th mat-header-cell *matHeaderCellDef> LOG </th>
  <td mat-cell *matCellDef="let data"><button class="btn btn-info" (click)="onLog(data)" [disabled]="data.SHOW_LOG_BUTTON === 'N'">Log</button></td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let element; columns: displayedColumns;" class="example-element-row"
  [class.example-expanded-row]="expandedElement === element" [ngClass]="{
          'is-white': element.STATUS === 'S',
          'is-blue': element.STATUS === 'W',
          'is-red': element.STATUS === 'E',
          'is-green': element.STATUS === 'F'
        }"
  (click)="this.dataSource3 = onElementExpand(element); expandedElement = element;"></tr>

<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>

<mat-toolbar>
  <mat-toolbar-row>
    <button class="btn btn-primary" (click)="onRefresh()" [disabled]="false">{{ 'button.Refresh' |
      translate }}</button>
    <span class="example-spacer"></span>
    <mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100]" showFirstLastButtons></mat-paginator>
  </mat-toolbar-row>
</mat-toolbar>
</div>

CSS：

table {
  width: 100%;
}

tr.example-detail-row {
  height: 0;
}

.mat-header-cell
{
  background-color: whitesmoke;
}

tr.is-white {
  background: white;
}

tr.is-blue {
  background: #E0FFFF;
}

tr.is-red {
  background:   #FF4500;
}

tr.is-green {
  background: #90EE90;
} 

tr.example-element-row:not(.example-expanded-row):hover {
  background: #f5f5f5;
}

tr.example-element-row:not(.example-expanded-row):active {
  background: #efefef;
}

.example-element-row td {
  border-bottom-width: 0;
}

/* .example-element-detail {
   overflow: hidden;
  display: flex;
  width: 100%;
} */

/* .example-element-diagram {
  min-width: 80px;
  border: 2px solid black;
  padding: 8px;
  font-weight: lighter;
  margin: 8px 0;
  height: 104px;
} */

/* .example-element-symbol {
  font-weight: bold;
  font-size: 40px;
  line-height: normal;
} */

/* .example-element-description {
  padding: 5px;
  width: 100%;
} */

/* .example-element-description-attribution {
  opacity: 0.5;
} */

.mat-elevation-z8 {
  width: 100%;
}

.mat-row:hover {
  background-color: whitesmoke;
}

/* .example-icon {
  padding: 0 14px;
} */

/* .example-spacer {
  flex: 1 1 auto;
} */

.mat-paginator
{
  background-color: whitesmoke;
}

.mat-column-START
{
  width: 60px;
}

.mat-column-STOP
{
  width: 60px;
}

.mat-column-SKIP
{
  width: 60px;
}

.mat-column-LOG
{
  width: 60px;
}

Angular 6-Mat Table（扩展元素）-100％宽度

0 个答案: