重置Bootstrap样式修复PrimeNG OrgChart连接线不显示问题

A) th、tr、tbody、td 元素的默认CSS属性值 #

浏览器对表格相关元素的默认边框样式如下，你可以用这些值覆盖Bootstrap _reboot.scss的设置：

• border-style：none（CSS初始值，默认表格元素无边框样式）
• border-width：medium（CSS初始值，因border-style为none，该宽度不会实际生效）

在项目自定义CSS/Scss文件中添加以下代码，仅针对PrimeNG OrgChart元素恢复默认样式：

.p-orgchart th,
.p-orgchart tr,
.p-orgchart tbody,
.p-orgchart td {
  border-style: none;
  border-width: medium;
}

若Bootstrap样式优先级更高，可在属性后追加!important强制覆盖（仅必要时使用）。

B) 让OrgChart 忽略 Bootstrap _reboot.scss 的样式 #

有三种可行方案：

1. 精准选择器覆盖：上述代码已通过.p-orgchart前缀限定作用范围，仅修改OrgChart组件内的表格元素样式，不会影响项目其他表格。
2. Angular组件样式隔离：若OrgChart在Angular组件中使用，可在组件CSS文件中用::ng-deep穿透样式隔离，确保样式生效：

::ng-deep .p-orgchart th,
::ng-deep .p-orgchart tr,
::ng-deep .p-orgchart tbody,
::ng-deep .p-orgchart td {
  border-style: none;
  border-width: medium;
}

3. 修改Bootstrap导入规则：若项目通过SCSS导入Bootstrap，可自定义_reboot.scss的选择器，给表格元素样式添加:not(.p-orgchart)排除条件，让Bootstrap样式不作用于OrgChart元素。例如修改_reboot.scss中的相关规则：

th:not(.p-orgchart th),
tr:not(.p-orgchart tr),
tbody:not(.p-orgchart tbody),
td:not(.p-orgchart td) {
  border-style: solid;
  border-width: 0;
  /* 保留Bootstrap原有其他样式 */
}

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