antd表格样式

最新推荐文章于 2025-05-06 15:59:38 发布

杂草沫

最新推荐文章于 2025-05-06 15:59:38 发布

阅读量2.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css react

本文链接：https://blog.youkuaiyun.com/StacyMo/article/details/103716340

css 同时被 2 个专栏收录

8 篇文章

订阅专栏

react

1 篇文章

订阅专栏

本文详细介绍了如何使用Ant Design框架自定义表格样式，包括实现斑马纹效果的行样式及鼠标悬停时的行背景变化。通过具体代码示例，展示了如何利用rowClassName属性设置交替的行样式，以及如何覆盖默认的鼠标悬停样式。

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

antd表格样式

（1）table行样式（斑马纹表格，rowClassName为表格行的类名，接收两个参数，其中index表示第几行，index不包含表头）

<Table dataSource={data} columns={columns}  rowClassName={(record, index) => (index % 2 === 0 ? styles.unOdd : styles.odd)} />

（2）表格行鼠标悬浮样式

.ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td { background-color: transparent !important;}

.ant-table-body .ant-table-row-hover {background: transparent !important;}

.ant-table-body .ant-table-row-hover > td {background: transparent !important;}