我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。
本文作者：修能
数栈产品里的Descriptions组件实际上就是antd的Descriptions组件。在数栈产品中，我们通常使用的方式是bordered + small的模式，如下所示：
<Descriptions bordered size="small">
<Descriptions.Item label="任务名称">
{taskName}
</Descriptions.Item>
<Descriptions.Item label="指标表名称">
{tableName}
</Descriptions.Item>
</Descriptions>
这种展示方式看起来平平无奇，甚至非常普通。但实际上，其中蕴含了一些玄机。
我们想要实现一行只有一个Item的设计方式。为了实现这一点，我们可以借助Descriptions组件的column API。
通过设置
<Descriptions bordered size="small" column={1}>
，我们可以实现如下效果：
此时，一位同事发出疑惑：“怎么就这么宽了？”
这时，我们尝试根据设计稿的尺寸给设置宽度，但由于模块是在详情的抽屉里，抽屉的宽度是不固定的，因此设置固定值会导致问题。
此时，我们需要模拟一下任务名称很长并且使用Button组件的情况。
我们尝试使用EllipsisText组件解决溢出省略的问题，但貌似并没有生效。这是为何呢？
分析原因如下：通过设置maxWidth为百分比，然后配合overflow。但我们发现，tr元素的宽度并没有按照我们设想的继承父元素的宽度，而是被子元素撑开了。
观察到，这里的table组件上有table-layout属性，如果设置为auto，则表示默认情况下，表格及其单元格的宽度会根据内容自动调整大小。
然而，Descriptions组件默认的table-layout是auto，且并没有相关的属性去修改这个值。因此，我们只能通过全局的CSS去修改，或者在指标里重写Descriptions组件，让用户可控地去使用Descriptions组件。
欢迎关注【袋鼠云数栈UED团队】~ 袋鼠云数栈UED团队持续为广大开发者分享技术成果，相继参与开源了欢迎star：
- 大数据分布式任务调度系统——Taier
- 轻量级的Web IDE UI框架——Molecule
- 针对大数据领域的SQL Parser项目——dt-sql-parser
- 袋鼠云数栈前端团队代码评审工程实践文档——code-review-practices
- 一个速度更快、配置更灵活、使用更简单的模块打包器——ko
- 一个针对antd的组件测试工具库——ant-design-testing
标签：游戏攻略
