表格宽度和高度自适应

一、设置表格内容自适应，但未设置表格高度

1. 关键代码：

<Table
    dataSource={dataSource} 
    columns={columns}
    scroll={{
        x: 'max-content', // 表格内容自适应
    }} 
/>

表格所需数据如下：

const dataSource = [
        {
          key: '1',
          name: '胡彦斌',
          age: 32,
          address: '杭州市西湖区湖底公园1号',
        },
        {
          key: '2',
          name: '胡彦祖',
          age: 42,
          address: '杭州市西湖区湖底公园1号',
        },
        {
            key: '3',
            name: '胡彦斌',
            age: 32,
            address: '杭州市西湖区湖底公园1号',
          },
          {
            key: '4',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
          },
          {
            key: '5',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '6',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
          },
          {
            key: '7',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '8',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
          },
          {
            key: '9',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '10',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
          },
      ];
      
      const columns = [
        {
          title: '你的名字是什么',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '你的年龄是多少',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: '你的家庭住址在哪',
          dataIndex: 'address',
          key: 'address',
        },
        {
            title: '你的职业是什么',
            dataIndex: 'name',
            key: 'name',
            width: 130,
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '地址',
            dataIndex: 'address',
            key: 'address',
            width: 70,
        },
        {
            title: '你的工作单位在哪',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '你的住址是什么',
            dataIndex: 'address',
            key: 'address',
            width: 130,
        },
        {
            title: '你的年龄是多少',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '地址',
            dataIndex: 'address',
            key: 'address',
            width: 130,
        },
        {
            title: '你的年龄是多少',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '地址',
            dataIndex: 'address',
            key: 'address',
        },
      ];

2. 实现效果：

3. 存在的问题：表格高度未定，超出页面剩余高度

二、设置表格内容自适应，同时设置表格高度

1. 关键代码：

<Table
    dataSource={dataSource} 
    columns={columns}
    scroll={{
        x: 'max-content', // 表格内容自适应
        y: 300, // 设置表格高度（表格占满剩余高度）
    }} 
/>

2. 实现效果：
3. 存在的问题：表头换行（或显示不全）

三、设置表格内容自适应，同时设置表格高度，此外设置表头宽度

1. 关键代码：

// 添加column宽度
const columns = [
        {
          title: '你的名字是什么',
          dataIndex: 'name',
          key: 'name',
          width: 130, // 设置column的宽度width
        },
        {
          title: '你的年龄是多少',
          dataIndex: 'age',
          key: 'age',
          width: 130, 
        },
        {
          title: '你的家庭住址在哪',
          dataIndex: 'address',
          key: 'address',
          width: 150, 
        },
        {
            title: '你的职业是什么',
            dataIndex: 'name',
            key: 'name',
            width: 130, 
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
            width: 70, 
        },
        {
            title: '地址',
            dataIndex: 'address',
            key: 'address',
            width: 70, 
        },
        {
            title: '你的工作单位在哪',
            dataIndex: 'address',
            key: 'address',
            width: 150, // 设置column的宽度width
        },
        {
            title: '你的住址是什么',
            dataIndex: 'address',
            key: 'address',
            width: 130, 
        },
        {
            title: '你的年龄是多少',
            dataIndex: 'age',
            key: 'age', 
            width: 130, 
        },
        {
            title: '地址',
            dataIndex: 'address',
            key: 'address',
            width: 70, 
        },
     ];
<Table
    dataSource={dataSource} 
    columns={columns}
    scroll={{
        x: 'max-content', // 表格内容自适应
        y: 300, // 设置表格高度（表格占满剩余高度）
    }} 
/>

// 若未设置样式，表格每列宽度为column设置的宽度，表格内容换行
.ant-table-tbody > tr > td {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

2. 实现效果
3. 存在的问题：暂无

补充异常

1. 异常描述：首次加载页面时数据为空，表头换行（或显示不全）
2. 解决方法：可根据表格数据是否为空，设置scroll的y值
3. 关键代码：

<Table
    dataSource={dataSource} 
    columns={columns}
    scroll={{
        x: 'max-content', // 表格内容自适应
        y: dataSource.length>0 ? 300 : undefined, // 根据条件设置表格高度
    }} 
/>