typescript 如何将边框插入到表格单元格中,使其不会弄乱表格

jxct1oxe  于 2023-04-07  发布在  TypeScript
关注(0)|答案(1)|浏览(145)

我有一个ng表,我希望动态应用边界的细胞。
我可以做到这一点。但是,它会使表格单元格不对齐,特别是如果我试图做一个粗边框...

我已经修改了单元格的宽度,但我真正想做的是,让单元格保持原来的大小,但在单元格的内部有一个严格的边界。
这是我的html代码。不要太多...

<ng-template pTemplate="body" let-year let-columns="columns" let-editing="editing" let- 
   ri="rowIndex">
    <tr [pEditableRow]="year">

        <td *ngFor="let col of columns" [ngClass]="{'schedule-cell-non-zero'}"></td>
    </tr>
</ng-template>

这里是我的.scss代码.再次没有太多的..

.schedule-cell-non-zero {

  $color-border: $--laps-light-green;
  
  &.inset-border {
    box-shadow: inset 0 0 10px #000000;
  }
  
  display: flex;
  flex-direction: column;
  width: 100%;

  display: flex;
  border: 10px solid $color-border;
  background-color: var(--primary-color);
  font-weight: 300;
  flex-wrap: wrap;

  
  
}

有什么建议吗?非常感谢

46scxncf

46scxncf1#

尝试使用box-sizing CSS属性
schedule-cell-non-zero类名上的box-sizing: border-box;

相关问题