antd 表格 单行dataSource字体加粗
时间: 2023-07-24 09:31:35 浏览: 100
antd 表格列宽自适应方法以及错误处理操作
5星 · 资源好评率100%
如果您需要将整个表格的字体加粗,包括表头和表格数据,可以通过自定义表格的样式来实现。示例代码如下:
```jsx
import { Table } from 'antd';
import './App.css';
const dataSource = [
{
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',
},
];
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
];
const App = () => {
return (
<Table
dataSource={dataSource}
columns={columns}
className="table-bold" // 自定义表格样式
/>
);
};
export default App;
```
在上面的示例中,我们通过定义一个名为 `table-bold` 的 CSS 样式类来实现表格的字体加粗。可以在 `App.css` 文件中添加以下代码:
```css
.table-bold {
font-weight: bold;
}
```
这样就可以将整个表格的字体加粗了。如果需要仅对表格数据的字体加粗,可以使用 `rowClassName` 属性来设置单元格的样式。
阅读全文