Я хочу отображать данные в строке, но они отображаются в столбце ... Как это изменить

Question

Как я уже упоминал в заголовке, у меня проблема с отображением данных в строке ...

Пример, я хочу отобразить так:

но он выглядит так:

А это мой код:

<table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8-">
  <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
    <td mat-cell *matCellDef="let element; let i = index" class="pointer">
      <p *ngIf="column.length == 11">{{element.agentName}}</p>
    </td>
  </ng-container>

  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
  <ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let element of " [attr.colspan]="columnsToDisplay.length">
      <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
        <div class="element-sub" *ngFor="let item of element.listagentstatus">
          <div mat-cell class="element-agent"></div>
          <div mat-cell class="element-url"><a href="{{item.mainUrl}}"> {{item.mainUrl || null}}</a> </div>
          <div mat-cell class="element-status"> {{item.status}} </div>
          <div mat-cell class="element-lastrun"> {{item.datetime | date: 'dd/MM/yyyy (h:mm)'}} {{columnsToDisplay.length}} </div>
        </div>

      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr mat-row *matRowDef="let element; columns: columnsToDisplay;" class="example-element-row" [class.example-expanded-row]="expandedElement === element"
  (click)="expandedElement = expandedElement === element ? null : element">
  </tr>
  <tr mat-row *matRowDef="let item; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>

Где долженЯ меняю ..

Надеюсь, что вы все можете помочь ..

Заранее спасибо ..

Answer 1

Я получил ответ ... Я просто положил <div class="rTableRow">

Вы можете сослаться на этот код

    <table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8-">
  <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
    <td mat-cell *matCellDef="let element; let i = index" class="pointer">
      <p *ngIf="column.length == 11">{{element.agentName}}</p>
    </td>
  </ng-container>

  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
  <ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let element of " [attr.colspan]="columnsToDisplay.length">
      <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
     <div class="rTableRow"> <!-- I add this class -->
        <div class="element-sub" *ngFor="let item of element.listagentstatus">
          <div mat-cell class="element-agent"></div>
          <div mat-cell class="element-url"><a href="{{item.mainUrl}}"> {{item.mainUrl || null}}</a> </div>
          <div mat-cell class="element-status"> {{item.status}} </div>
          <div mat-cell class="element-lastrun"> {{item.datetime | date: 'dd/MM/yyyy (h:mm)'}} {{columnsToDisplay.length}} </div>
        </div>
       </div>
      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr mat-row *matRowDef="let element; columns: columnsToDisplay;" class="example-element-row" [class.example-expanded-row]="expandedElement === element"
  (click)="expandedElement = expandedElement === element ? null : element">
  </tr>
  <tr mat-row *matRowDef="let item; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>

И в файле CSS

.rTableRow {
display: table-row;
width: 100%

} * +1010 *