ant design table组件的Header如何配置？

Question

我们有需要在 table 的 header 上显示 'Hide/Show' 列功能的要求，并且我们还想为 header 提供不同的颜色=18=]在蚂蚁设计中。任何人都可以帮助我我们该怎么做？我没有找到任何控件来执行此操作，因为 header 渲染完全在组件内部进行。

Answer 1

您可以将 <Table.Column title={<...any react node...>}> 属性与普通 CSS 结合使用。

Answer 2

我试图解决 header 的背景颜色问题是覆盖蚂蚁样式 class 如下

thead[class*="ant-table-thead"] th{
  background-color: yellow !important;
}

我不确定这是否是正确的做法。 antd 应该在 Table 上提供 属性 来配置 header 样式。

还有其他更好的方法吗？

Answer 3

kalpana 提供的解决方案对我不起作用。起作用的 (Ant V4.10.x) 是这样的：

thead > tr > th {
  background-color: yellow;
}

请注意，不需要 !important 设置即可完成这项工作。

同样，如果你想定位table的单元格，你可以使用：

tbody > tr > td {
  background-color: yellow;
}