Ant Design Table自适应列宽，简洁、高效！

2023-12-30 03:28:58

前言

目前在弄一个动态表格的项目，但由于没法知道每个列具体的内容，无法确定表格的列宽，而统一的设定会导致有的列内容很挤，有的列内容很空洞，整体视觉较差。

分析问题

Ant Design的Table组件本身并不支持自适应列宽，但我们可以通过修改CSS样式来实现这一功能。

解决方案

要在Ant Design的Table组件中使用自适应列宽，我们需要修改以下CSS样式：

.ant-table-thead th {
  width: auto;
  min-width: 100px;
}

.ant-table-tbody td {
  width: auto;
  min-width: 100px;
}

其中，.ant-table-thead th和.ant-table-tbody td分别代表表格的表头和表体单元格。

  width: auto;

这条样式将表格的列宽设置为自动，使其根据内容自动调整。

  min-width: 100px;

这条样式将表格的列宽设置一个最小值，防止内容太少时列宽过窄。

示例代码

import React, { useState } from "react";
import { Table } from "antd";

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: "Sydney 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 (
    <div>
      <Table columns={columns} dataSource={data} />
    </div>
  );
};

export default App;