如何修改table行边框（antd）？

Question

我正在使用 ant design 中的树 table 组件显示报告。

我想为折叠的父项或最后一个展开的子项制作底部边框，以便将报告分成多个部分。

现状对比预期效果

理想情况下，我需要一种方法来通过 table 数据源中的属性设置 css class 名称。

Answer 1

可以在JSX标签中自定义className，添加css 属性 可以在inspection

中找到目标className

.customizeClassName { :global { .targetAntdClassName { border: none } } }

Answer 2

所有边框属性在关卡上都不起作用。他们必须在水平上。因此，仅提供一个 class 名称来修改一行的边框是行不通的。

一种解决方法是使用 Antd“rowClassName”属性设置一个 class 名称（这可以设置为动态 returns class 名称的函数）。

然后，分配以下 classes:

.highlight-bottom-border > td {
  border-bottom: solid 1px black !important
}

.highlight-top-border > td {
  border-top: solid 2px black !important;
  border-bottom: solid 2px #6d9eff !important
}

通过这样做，级别被修改，导致更明确的边界。