如何实现类似Gmail收件箱的Ant Design响应式表格？

嘿，我懂你想要的效果——大屏上是规整的横向表格，小屏幕下自动转成类似Gmail收件箱的条目式展示，每个字段单独成行。Ant Design Table确实没直接提供这个功能，但咱们用自定义样式+媒体查询就能轻松搞定，而且还能保留Table原有的排序等功能，完美适配需求！

解决方案思路 #

我们的核心逻辑是：给表格单元格添加自定义属性标记列标题，再通过CSS媒体查询在小屏幕下重构布局——隐藏表头、把行转为卡片容器、用伪元素显示每个字段的标题，既保留原有功能，又实现响应式适配。

1. 修改React代码，添加自定义标识

先给Table组件加专属类名方便写CSS，同时通过customCell给每个单元格绑定data-title属性（值为对应列的标题）：

import "./App.css";
import { Table } from "antd";

function App() {
  const columns = [
    { 
      title: "From", 
      dataIndex: "from", 
      sorter: (a, b) => a.from.length - b.from.length, 
      sortDirections: ["descend", "ascend"], 
    },
    { 
      title: "To", 
      dataIndex: "to", 
      sorter: (a, b) => a.to.length - b.to.length, 
      sortDirections: ["descend", "ascend"], 
    },
    { 
      title: "Subject", 
      dataIndex: "subject", 
      sorter: (a, b) => a.subject.length - b.subject.length, 
      sortDirections: ["descend", "ascend"], 
    },
    { 
      title: "Date", 
      dataIndex: "date", 
      sorter: (a, b) => a.date.localeCompare(b.date), // 优化日期排序逻辑
      sortDirections: ["descend", "ascend"], 
    },
  ];

  const data = [
    { key: "1", from: "aaa@example.com", to: "zzz.zzz@example.com", subject: "[ HR-888 ] Notice of official announcement", date: "0:20", },
    { key: "2", from: "bbb.bbbb@example.com", to: "yyy.yyy@example.com", subject: `[web:333] "Web Contact"`, date: "0:20", }
  ];

  return (
    <div className="App">
      <Table 
        columns={columns} 
        dataSource={data} 
        pagination={false}
        className="responsive-gmail-table"
        customCell={(column) => ({
          "data-title": column.title, // 给单元格绑定标题属性
        })}
      />
    </div>
  );
}

export default App;

2. 编写响应式CSS样式

在App.css中添加媒体查询，针对小屏幕调整布局，模拟Gmail移动端风格：

/* 大屏保持Ant Design默认表格样式 */
.responsive-gmail-table {
  width: 100%;
  margin-top: 16px;
}

/* 小屏幕适配（以768px为分界，可按需调整） */
@media screen and (max-width: 768px) {
  /* 隐藏表头 */
  .responsive-gmail-table thead {
    display: none;
  }

  /* 把每行转为卡片式容器 */
  .responsive-gmail-table tbody tr {
    display: block;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  /* 把每个单元格转为块级元素，单独成行 */
  .responsive-gmail-table tbody td {
    display: block;
    text-align: right;
    padding: 8px 0;
    position: relative;
    border: none !important; /* 去掉默认单元格边框 */
  }

  /* 用伪元素显示字段标题，放在左侧 */
  .responsive-gmail-table tbody td::before {
    content: attr(data-title);
    position: absolute;
    left: 0;
    font-weight: 500;
    color: #666666;
  }

  /* 突出显示Subject字段，更贴近Gmail风格 */
  .responsive-gmail-table tbody td[data-title="Subject"] {
    font-size: 16px;
    font-weight: 500;
    color: #1a1a1a;
    margin: 12px 0;
  }

  /* 调整排序图标位置，避免和内容重叠 */
  .responsive-gmail-table .ant-table-column-sorter {
    position: absolute;
    right: 0;
    margin-left: 8px;
  }
}

效果说明 #

• 大屏（≥768px）：保持Ant Design Table默认横向布局，排序功能正常使用；
• 小屏幕（<768px）：表头隐藏，每行变成独立卡片，每个字段单独成行，左侧显示字段标题，Subject字段突出显示，完全复刻Gmail移动端收件箱的视觉体验。

你还可以根据产品风格，自由调整媒体查询断点、卡片样式、字体大小等细节哦~

内容的提问来源于stack exchange，提问作者qasimmehdi