stripe 怎么用
时间: 2023-07-03 13:20:05 浏览: 102
stripes入门
Ant Design中的`Table`组件提供了`stripe`属性,用来设置表格的斑马线效果,即交替显示不同背景色的行。
在`Table`组件中设置`stripe`为`true`即可开启斑马线效果:
```jsx
<Table dataSource={dataSource} columns={columns} stripe />
```
你也可以通过`tableClassName`属性来自定义表格的样式:
```jsx
<Table dataSource={dataSource} columns={columns} stripe tableClassName="my-table" />
```
然后在CSS中定义`.my-table .ant-table-row:nth-child(even)`和`.my-table .ant-table-row:nth-child(odd)`来设置偶数行和奇数行的背景色即可:
```css
.my-table .ant-table-row:nth-child(even) {
background-color: #f5f5f5;
}
.my-table .ant-table-row:nth-child(odd) {
background-color: #fff;
}
```
以上代码将偶数行的背景色设置为浅灰色,奇数行的背景色设置为白色。你可以根据需求自行修改。
阅读全文