web-dev-qa-db-ja.com

angular mat-table rowに境界線を適用できないのはなぜですか？

簡単なangular材料表があります：

<table mat-table [dataSource]="scoreboardData">
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>
    <ng-container matColumnDef="totalScore">
      <th mat-header-cell *matHeaderCellDef> Total Score </th>
      <td mat-cell *matCellDef="let element"> {{element.totalScore}}</td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

行とボーダーの間に余白を追加したいと思います。行の背景色を変更できることを確認しましたが、行にマージン、パディング、またはボーダーを適用できません。

tr.mat-row {
    background: #2f5b98; /* Old browsers */
    background: -moz-linear-gradient(top, rgba(74,144,239,1) 20%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(74,144,239,1) 20%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(74,144,239,1) 20%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a90ef', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

    margin-top: 16px;
    padding: 8px;
    border: 1px solid #FAFF00;
}

簡単なことだと思いますが、これらのスタイルを行に適用できない原因を特定できません。繰り返しますが、背景、その中のフォント、その他のいくつかのスタイルを変更できます。これら3つの特定のスタイル（パディング、マージン、ボーダー）は変更できません。

編集：私はそれ以来、パディングとマージンがhtmlテーブルで許可されていないと判断しました。国境はまだ私を逃れます。

cssangularangular-materialangular-material-table
6
Rob

スタイリングの問題は、Angular Materialテーブルとは関係ありませんが、一般的にHTMLテーブルと関係があります。tableのスタイルを設定する方法を検索する場合は、行またはマージンに境界線を追加します。さまざまな答えや提案があります。

ボーダー、マージン、パディングが必要な場合は、次のようにします。

td.mat-cell {
 /* row padding */
 padding: 16px 0 16px 0;
 /* row border */
 border-bottom: 1px solid #FAFF00;
 border-top: 1px solid #FAFF00;
}

td.mat-cell:first-child {
  /* row border */
  border-left: 1px solid #FAFF00;
}

td.mat-cell:last-child {
  /* row border */
  border-right: 1px solid #FAFF00;
}

table {
  /* row spacing / margin */
  border-spacing: 0 8px !important;
}

行の境界線のみが必要で、行間の間隔/マージンがない場合は、次のようにすることができます。

table {
  border-collapse: collapse;
}

tr.mat-row {
  border: 1px solid #FAFF00;
}

td.mat-cell {
  border: none;
}

ご覧のとおり、いくつかの方法があります。最初のアプローチを使用して、このStackblitzを作成しました。 https://stackblitz.com/edit/angular-cjxcgt-teiuyh

1
fridoo
mat-footer-row, mat-header-row, mat-row {
  border-bottom-width: 10px;
}

このコードを試してください。これは動作します:)

1
Jay

最も簡単でより良い方法は、angularマテリアルの力を利用することです。table、th、tdの代わりにmat-table、mat-h​​eader-cell、mat-cellを使用します。最後にマットを使用します-header行とmat-rowはthとtdではなく、必要に応じて各行の境界を設定できます。

ライブの例： Stackblitz

0
Md. Rafee