代码之家 › 专栏 › 技术社区 › Marcus Grass

角形垫子桌与包含长字符串的单元格奇怪对齐

angular-material angular css html

Marcus Grass · 技术社区 · 6 年前

我刚让mat表开始工作,但是我在修复上面的对齐方式时遇到了一些实际问题,我不确定如何操作它,但确实需要单元格左对齐,就像标题一样。

一张桌子现在的样子可能会有帮助: [![在此处输入图像描述][1]][1] 正如您所看到的那样,这种对齐方式实际上是不正确的,我在这里看到了一些关于堆栈溢出和github的线程,但是还没有实现任何建议。

目前我的css看起来非常简单,如下所示:

table {
    width: 100%;
  }

我的html如下所示:

<h3> All Uploaded invoices:</h3>
<div class="invoice-table mat-elevation-z8">
  <table mat-table #table [dataSource]="invoices">

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

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

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

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

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

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

    <ng-container matColumnDef="daysleft">
      <th mat-header-cell *matHeaderCellDef> Days left </th>
      <td mat-cell *matCellDef="let invoice"> {{invoice.daysleft}} </td>
    </ng-container>

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


    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <mat-paginator [pageSizeOptions]="[20, 100, 200]" showFirstLastButtons></mat-paginator> 
</div>
<p><a [routerLink]="['/login']">Logout</a></p>

是否有一种简单的方法来左对齐这些值,就像标题对齐一样?〔1〕: https://i.stack.imgur.com/i5SyD.png

2 回复 | 直到 6 年前

yer 6 年前

您可以这样做,而不是使用td和th,除非您特别想使用表标记

 <mat-table #table [dataSource]="invoices">
    <ng-container matColumnDef="dateout">
          <mat-header-cell *matHeaderCellDef> Dateout </mat-header-cell>
          <mat-cell *matCellDef="let invoice"> {{invoice.dateout}} </mat-cell>
        </ng-container>

</mat-table>

Gurvinder Guraya 6 年前

除了table元素上的invoice table类之外,其他的一切对我来说都很好

你在里面应用了什么css属性吗?像一个填充物或其他东西的子元素?