CSS 角材料表 - 表内的边框

Angular Material Table -Border Inside the Table

提问by Vikas

I am using Angular material table and I want to set border inside the table, Using CSS I was able to set border: Normal case[
but when the content of a particular cell increases border of the neighbor cells don't grow and the table looks pretty bad cell with extra content
here is the CSS:

我正在使用 Angular 材质表，我想在表内设置边框，使用 CSS 我能够设置边框：正常情况[
但是当特定单元格的内容增加时，相邻单元格的边框不会增长并且表格看起来带有额外内容的非常糟糕的单元格 是 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`

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>

`

`

回答by Vikas

Approach-2:Eventually, I figured out the solution, since material uses flex-layout we can use CSS align-self: stretch; /* Stretch 'auto'-sized items to fit the container */Result with align-self: stretch

方法 2：最终，我找到了解决方案，因为材料使用 flex-layout 我们可以使用 CSS align-self: stretch; /* Stretch 'auto'-sized items to fit the container */Result 和 align-self:stretch

Here is the updated CSS

这是更新的 CSS

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

回答by Hoang Duc Nguyen

Approach:1You need to stretch your table cell content whenever parent row height grows. To do that you can make your table cell a flex box, add an additional class to mat-cell <mat-cell class="flex-stretch">and add these to your css:

方法：1每当父行高增加时，您都需要拉伸表格单元格内容。为此，您可以将表格单元格设为弹性框，向 mat-cell 添加一个额外的类<mat-cell class="flex-stretch">并将这些添加到您的 css 中：

.mat-cell .flex-stretch {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    /* align-items center so that cell content is vertically centered */
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}