antd Table修改表头高度
时间: 2023-10-16 15:09:53 浏览: 265
解决Antd Table组件表头不对齐的问题
5星 · 资源好评率100%
如果你想要在antd的Table组件中修改表头的高度,你可以通过CSS来实现。
首先,你可以使用`className`属性给Table组件添加一个自定义的类名。然后在CSS中设置这个类名的样式来修改表头的高度。
例如,你可以这样设置:
```jsx
import { Table } from 'antd';
import './CustomTable.css';
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
width: 200,
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
width: 100,
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
width: 300,
},
];
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
];
function CustomTable() {
return (
<Table
columns={columns}
dataSource={data}
className="custom-table"
pagination={false}
/>
);
}
export default CustomTable;
```
然后在`CustomTable.css`中设置表头的高度,例如:
```css
.custom-table .ant-table-thead > tr > th {
height: 50px;
}
```
这样就可以将表头的高度修改为50px。你可以根据自己的需要来设置高度。
阅读全文