角垫表与包含长字符串的单元格的奇怪对齐 [英] Angular mat-table weird alignment with cells containing long strings

问题描述

我刚刚让 mat-table 工作，但我在修复它的对齐方式时遇到了一些实际问题，我不确定如何操作它但确实需要将单元格左对齐，就像标题是.

这张表格目前的样子可能会有所帮助:[![在此处输入图像描述][1]][1]正如您所看到的，对齐确实是关闭的，我一直在查看 Stack Overflow 和 github 上的一些线程，但无法实现任何建议.

目前我的 css 看起来非常简单:

table {宽度:100%；}

我的 html 看起来像这样:

所有上传的发票:</h3><div class="invoice-table mat-elevation-z8"><table mat-table #table [dataSource]="invoices"><ng-container matColumnDef="评级"><th mat-h​​eader-cell *matHeaderCellDef>评级</th><td mat-cell *matCellDef="let invoice">{{invoice.rating}} </td></ng-容器><ng-container matColumnDef="amount"><th mat-h​​eader-cell *matHeaderCellDef>金额<td mat-cell *matCellDef="let invoice">{{invoice.amount}} </td></ng-容器><ng-container matColumnDef="债务人"><th mat-h​​eader-cell *matHeaderCellDef>债务人<td mat-cell *matCellDef="let invoice">{{invoice.debtor}} </td></ng-容器><ng-container matColumnDef="serial"><th mat-h​​eader-cell *matHeaderCellDef>串行</th><td mat-cell *matCellDef="let invoice">{{invoice.serial}} </td></ng-容器><ng-container matColumnDef="dateout"><th mat-h​​eader-cell *matHeaderCellDef>Dateout </th><td mat-cell *matCellDef="let invoice">{{invoice.dateout}} </td></ng-容器><ng-container matColumnDef="expiration"><th mat-h​​eader-cell *matHeaderCellDef>到期日<td mat-cell *matCellDef="let invoice">{{invoice.expiration}} </td></ng-容器><ng-container matColumnDef="daysleft"><th mat-h​​eader-cell *matHeaderCellDef>剩余天数<td mat-cell *matCellDef="let invoice">{{invoice.daysleft}} </td></ng-容器><ng-container matColumnDef="fid"><th mat-h​​eader-cell *matHeaderCellDef>Fid </th><td mat-cell *matCellDef="let invoice">{{invoice.fid}} </td></ng-容器><tr mat-h​​eader-row *matHeaderRowDef="displayedColumns"></tr><tr mat-row *matRowDef="let row; columns:displayedColumns;"></tr><mat-paginator [pageSizeOptions]="[20, 100, 200]" showFirstLastButtons></mat-paginator>

<p><a [routerLink]="['/login']">注销</a></p>

是否有一种简单的方法可以像标题对齐那样左对齐值?[1]:https://i.stack.imgur.com/i5SyD.png

解决方案

你可以这样来代替 td 和 th，除非你想特别使用 table 标签

 <ng-container matColumnDef="dateout"><mat-h​​eader-cell *matHeaderCellDef>Dateout </mat-h​​eader-cell><mat-cell *matCellDef="let invoice">{{invoice.dateout}} </mat-cell></ng-容器></mat-table>

I just got the mat-table to work, but I'm having some real problems fixing the alignment on it, I'm unsure how to manipulate it but would really need the cells to be left-aligned, just as the headers are.

A picture of how the table looks at the moment might help: [![enter image description here][1]][1] As you can see the alignment is really off, I've been looking at some threads here on Stack Overflow and github but haven't been able to implement any of the suggestions.

Currently my css looks super-simple like this:

table {
    width: 100%;
  }

And my html looks like this:

<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>

Is there a simple way to left-align the values like the headers are aligned? [1]: https://i.stack.imgur.com/i5SyD.png

解决方案

You can have like this instead of using td and th, unless you want to particularly use table tags

 <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>

这篇关于角垫表与包含长字符串的单元格的奇怪对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！