Html 如何将mat表格中的标题和数据更改为位于页面右侧?
我尝试在angular中使用mat table,这样我就可以有一个包含数据的表。问题是表字段的标题不在右侧,但我希望它们在右侧。我使用了RTl,但我没有工作。我该怎么办? 这是我的桌子 这是我的html代码Html 如何将mat表格中的标题和数据更改为位于页面右侧?,html,css,angular,angular-material,Html,Css,Angular,Angular Material,我尝试在angular中使用mat table,这样我就可以有一个包含数据的表。问题是表字段的标题不在右侧,但我希望它们在右侧。我使用了RTl,但我没有工作。我该怎么办? 这是我的桌子 这是我的html代码 <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" class="table" > <!--- Note that these columns can be defined
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" class="table" >
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef > NO </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
下面是一个小闪电战:
您只需将dir=“rtl”添加到html标记中,如
table {
direction: rtl;
width: 1300px;
}