如何为ng-table单元格添加内边框且不破坏表格布局

要解决PrimeNG Table单元格添加粗边框后错位的问题，核心是让边框不占用额外布局空间，以下是几种可行方案：

方案1：使用box-sizing: border-box（推荐） #

这个CSS属性会将边框和内边距计算在元素的宽高范围内，不会撑开单元格。修改你的SCSS代码：

.schedule-cell-non-zero {
  $color-border: $--laps-light-green;
  &.inset-border {
    box-shadow: inset 0 0 10px #000000;
  }
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  // 关键：让边框包含在元素自身尺寸内
  box-sizing: border-box;
  border: 10px solid $color-border;
  background-color: var(--primary-color);
  font-weight: 300;
}

方案2：使用outline替代border #

outline绘制在元素外部但不占用布局空间，不会影响单元格尺寸，适合不需要边框向内延伸的场景：

.schedule-cell-non-zero {
  $color-border: $--laps-light-green;
  &.inset-border {
    box-shadow: inset 0 0 10px #000000;
  }
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  // 用outline替代border，不占用布局空间
  outline: 10px solid $color-border;
  background-color: var(--primary-color);
  font-weight: 300;
}

方案3：用内边距+背景色模拟内部边框 #

如果需要边框完全在单元格内部显示，可以通过内边距+多层背景实现：

.schedule-cell-non-zero {
  $color-border: $--laps-light-green;
  &.inset-border {
    box-shadow: inset 0 0 10px #000000;
  }
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  // 用padding留出边框空间，外层背景为边框色
  padding: 10px;
  background-color: $color-border;
  font-weight: 300;
  // 内部容器承载内容，背景为原单元格颜色
  & > * {
    background-color: var(--primary-color);
    width: 100%;
    height: 100%;
  }
}

对应的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'}">
            <div><!-- 单元格内容放在此处 --></div>
        </td>
    </tr>
</ng-template>

补充提示 #

• 原SCSS代码中重复写了两次display: flex，建议删除冗余项。
• 若使用box-sizing，确保全局样式未覆盖该属性（部分框架默认设置box-sizing: content-box）。

内容的提问来源于stack exchange，提问作者Tim