如何正确缩进（对齐）溢出行的标签？ - （蚂蚁设计表，树数据）

Question

我正在使用 Ant Design 提供的表格组件构建一个自定义组件。 对于大多数部分，一切都按预期工作，但是，有一个“小”问题。

我正在使用“tree-data”（即嵌套的 JSON）数据来填充Table组件。 由于固定的列大小（这是一项要求），在 QA 期间已经注意到，如果行的标签溢出（即从新行开始），则不会正确缩进。

所以我的问题是，如何缩进标签，以便当标签从新行开始时，它从初始缩进开始，如下所示：

目标是在绿色虚线容器内“挤压”标签。

在THIS LINK上，您可以找到一个演示（与 ant 设计文档中的演示相同，稍作更改），它复制了我正在处理的问题。

1. 打开链接
2. 展开第一行（即 John Brown sr.），如上图所示。

Answer 1

您可以将 display 'flex' 应用于列

// index.css
.name-column {
  display: flex;
}

// demo.js
// column
...
...
...
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
      className: 'name-column'
    },
...
...
...