primeNg table 在 tabSwitch 上有超过 5 条记录时修改容器宽度

Question

标签切换时容器的宽度会增加。但是当 table 只有少于 5 条记录时它工作正常。

Answer 1

实际的滚动条，默认的灰色方形滚动条，宽度为 18px。 PrimeNG 通过在高度和宽度上增加 18px 来掩盖它们：

.p-scrollpanel-content {
  height: calc(100% + 18px); 
  width: calc(100% + 18px); /* extra 18px to move scroll out of boundary and hide */
  padding: 0 18px 18px 0;
  position: relative;
  overflow: auto;
  box-sizing: border-box;
}

当内容没有溢出时，默认滚动条会被浏览器移除，因此它会向内容区域添加额外的 18px。内容加宽了 18px。

您需要在 styles.css 或它被编译的任何地方添加以下 CSS 规则：

.p-scrollpanel .p-scrollpanel-content {
  overflow-y: scroll !important;
}

上面的规则说无论是否溢出，总是显示垂直滚动条。 Fixed demo

primeNg table 在 tabSwitch 上有超过 5 条记录时修改容器宽度

primeNg table modifying container width when it has more than 5 records on tabSwitch

css

primeng

angular

p-table