web-dev-qa-db-fra.com

Pourquoi ne puis-je pas appliquer une bordure à une ligne de table mat angular?

J'ai une simple table matérielle 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>

Je voudrais ajouter une marge supplémentaire entre les lignes ainsi qu'une bordure et peut-être même du rembourrage. J'ai constaté que je pouvais changer la couleur d'arrière-plan des lignes, mais je ne pouvais pas appliquer de marges, de remplissage ou de bordures à la ligne.

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

Je suis sûr que c'est quelque chose de simple, mais je ne peux pas comprendre ce qui m'empêche d'appliquer ces styles à la ligne. Encore une fois, je peux changer l'arrière-plan, la police à l'intérieur et plusieurs autres styles, mais pas ces trois styles particuliers (remplissage, marge, bordure).

EDIT: J'ai depuis déterminé que le remplissage et la marge ne sont autorisés sur aucune table html. Mais Border m'échappe toujours.

cssangularangular-materialangular-material-table
6
Rob

Vos problèmes de style n'ont pas à voir avec Angular Tables de matériaux mais avec les tables HTML en général. Si vous cherchez comment styliser un table par exemple, ajoutez des bordures aux lignes ou aux marges vous trouverez diverses réponses et suggestions.

Si vous voulez une bordure, une marge et un rembourrage, vous pouvez faire quelque chose comme ceci:

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

Si vous ne voulez qu'une bordure de ligne mais aucun espacement/marge entre les lignes, vous pouvez le faire:

table {
  border-collapse: collapse;
}

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

td.mat-cell {
  border: none;
}

Comme vous pouvez le voir, il existe plusieurs façons. J'ai créé ce stackblitz où j'ai utilisé la première approche. https://stackblitz.com/edit/angular-cjxcgt-teiuyh

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

essayez ce code. Cela fonctionnera :)

1
Jay

Le moyen le plus simple et le meilleur consiste à utiliser la puissance de angular. Utilisez mat-table, mat-header-cell, mat-cell au lieu de table, th, td. À la fin, utilisez mat -ligne d'en-tête et mat-ligne au lieu de th et td. Ensuite, vous pouvez border chaque ligne comme vous le souhaitez.

Exemple en direct: Stackblitz

0
Md. Rafee