代码之家 › 专栏 › 技术社区 › Tim

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

primeng typescript css html

-2

Tim · 技术社区 · 3 年前

我有一个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>

这是我的.scs代码。再说一遍,没什么大不了的。。

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

  
  
}

有什么建议吗? 非常感谢