antd 修改 Table 组件行样式

最新推荐文章于 2024-05-12 16:05:32 发布

原创最新推荐文章于 2024-05-12 16:05:32 发布 · 621 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

组件库专栏收录该内容

9 篇文章

订阅专栏

这篇文章介绍了如何自定义antdTable组件的行样式，通过添加`border-collapse:collapse!important;`实现样式控制，并使用`rowClassName:table-row`来指定特定的CSS类。这种方法能有效节省在修改antd默认样式时所花费的时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 更改 antd table 组件 行样式
.ant-table table {
  // 这一行一定要加，才能随心所欲改样式
  border-collapse: collapse !important;
}
 .table-row {
  background-color: #112549;
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
  height: 50px;
  padding: 0;
  border-top: 10px solid rgba($color: #464545, $alpha: 0.0);
 }

table 添加属性 rowClassName: 'table-row'

antd 有时候改自带的属性比较费时间记录一下