antd 的table th 超出部分隐藏并显示省略号 ，鼠标悬停显示内容

可以使用 CSS 的 text-overflow 属性和 white-space 属性来实现。

首先，设置 th 的样式：

th {
  text-overflow: ellipsis; // 超出部分用省略号表示
  white-space: nowrap; // 不换行
  overflow: hidden; // 隐藏超出部分
}

然后，为了在鼠标悬停时显示完整内容，可以使用 CSS 的 :hover 伪类选择器来设置：

th:hover {
  white-space: normal; // 显示完整内容，允许换行
  overflow: visible; // 显示超出部分
}

这样，当鼠标悬停在 th 上时，就可以显示完整的内容了。

相关问题

antd table 单元格超出换行

您好！关于您所提到的antd table单元格超出换行的问题，您可以在表格中使用CSS属性"word-wrap: break-word;"来解决这个问题，具体代码如下：

.ant-table-cell {
word-wrap: break-word;
}

希望对您有所帮助！如果您有其他技术问题需要咨询，可以继续向我提问。

antd Table隐藏列

要隐藏Antd Table中的列，您可以使用`columns`属性来指定要显示的列。您可以将要隐藏的列从该数组中删除，然后将新数组传递给`columns`属性。例如，如果您要隐藏名称为“age”的列，可以按如下方式处理：

import React from 'react';
import { Table } from 'antd';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];

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',
  },
];

const App = () => {
  const newColumns = columns.filter(column => column.key !== 'age');

  return (
    <Table columns={newColumns} dataSource={data} />
  );
};

export default App;

在上面的代码中，我们使用`filter()`方法来删除`columns`数组中的“age”列，并将新数组传递给`columns`属性。这将导致只显示“Name”和“Address”列。