web-dev-qa-db-fra.com

Table de matériau angulaire - frontière à l'intérieur de la table

J'utilise une table de matériau angulaire et je souhaite définir une bordure à l'intérieur de la table. À l'aide de CSS, j'ai pu définir une bordure: Cas normal [.enter image description here
mais lorsque le contenu d'une cellule particulière augmente, la bordure des cellules voisines ne grossit pas et la table semble très mauvaise cellule avec extra content enter image description here
voici le CSS:

`.example-container {
  display: flex;
  flex-direction: column;
  max-height: 500px;
  min-width: 300px;
}

.mat-table {
  overflow: auto;
  max-height: 500px;
}
.mat-column-name{
  border-left: 1px solid grey;
  min-height: 48px;

}
.mat-column-weight{
  border-left: 1px solid grey;

   min-height: 48px;

.mat-column-symbol{
 border-left: 1px solid grey;
   min-height: 48px;
}`

HTML` 

<!--- 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">
  <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
</ng-container>

<!-- Name Column -->
<ng-container matColumnDef="name">
  <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>

<!-- Weight Column -->
<ng-container matColumnDef="weight">
  <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
</ng-container>

<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
  <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

`

cssangularangular-material
5
Vikas

Approche-2: Finalement, j’ai trouvé la solution, puisque le matériel utilise flex-layout, nous pouvons utiliser CSS align-self: stretch; /* Stretch 'auto'-sized items to fit the container */Résultat avec align-self: stretch

Voici le CSS mis à jour

    `.example-container {
      display: flex;
      flex-direction: column;

      flex-basis: 300px;
    }

    .mat-table {
      overflow: auto;
      max-height: 500px;
    }

     .mat-column-name{
    border-right: 1px solid grey;
    align-self: stretch;
    text-align: center


    }
    .mat-column-position{
    border-right: 1px solid grey;
    align-self: stretch;
    text-align: center;

    }
    .mat-column-weight{
    border-right: 1px solid grey;
    align-self: stretch;
    text-align: center;

    } 
    .mat-column-symbol{

    text-align: center;
    align-self: stretch;
    }
   .mat-column-weight{
       align-self: stretch;
    } `
6
Vikas