Angular Material Table -Border Inside the Table

9 浏览
0 Comments

Angular Material Table -Border Inside the Table

我正在使用Angular Material表格，想在表格内设置边框。使用CSS，我成功设置了边框：正常情况，但是当某个单元格的内容增加时，相邻单元格的边框不会随之增长，导致表格看起来很糟糕，如下图所示：额外内容。\n以下是CSS代码：\n

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

\nHTML代码：\n




   No. 
   {{element.position}} 



   Name 
   {{element.name}} 



   Weight 
   {{element.weight}} 



   Symbol 
   {{element.symbol}}

0

2 答案

0 Comments

问题出现的原因：当父行高度增加时，需要拉伸表格单元格内容。

解决方法：将表格单元格设置为flex box，并在mat-cell上添加一个额外的类名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;
}

0
0 Comments

问题的原因是Angular Material Table中的边框只出现在表格的外部，而不是在表格的内部。这可能导致表格不够美观和一致。解决方法是使用CSS样式来调整表格的边框样式。

通过使用flex-layout，可以使用CSS的align-self属性来解决这个问题。在CSS中添加align-self: stretch属性可以拉伸自动大小的项目以适应容器。

以下是更新后的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;
}

使用这个CSS样式可以解决Angular Material Table中边框只出现在表格外部的问题。另外，如果想要避免重复的CSS规则，还可以使用通配符来设置边框样式，例如[class*=" mat-column-"] { border-right: 1px solid grey; ... }。

希望这个解决方法对你有帮助！

0