[Table] 关于列支持配置 min-width 最小宽度的讨论

[cong-min]

这个功能解决了什么问题

需求：

当前 t-table 的表格无法支持通过配置 min-width 实现上述效果，目前只有 width 不符合预期：

https://codesandbox.io/s/tdesign-vue-demo-forked-j42crj?file=/src/demo.vue

而 element 支持 min-width 满足需求：

elelment table min-width 的效果

你建议的方案是什么

参考 element

[github-actions]

👋 @cong-min，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[github-actions]

♥️ 有劳 @realyuyanan @chaishi @cool-518 尽快确认问题。
确认有效后将下一步计划和可能需要的时间回复给 @cong-min 。

[chaishi]

想要的 minWidth 表格效果，应该都可以通过 width 实现的，只要合理调整 table 元素的宽度

[chaishi]

原生标签特性，不支持 minWdith；
AntD 也不支持 minWidth;

本就是一个很不需要的特性

[chaishi]

你想要的 Element 效果，一定可以通过 td.width 和 table.width 去达到你的预期的

[cong-min]

可以后续讨论下这个的必要性

[cong-min]

你想要的 Element 效果，一定可以通过 td.width 和 table.width 去达到你的预期的

是的，能够实现。
当产品需求是表格列的数量是动态不确定时，根据产品要求 某些列需有固定宽度，某些列有最小宽度，某些的列又没指定宽度时 (目的是希望在不同宽度的屏幕下，列的表现是一致的)，
这时需要业务自行实现方法去动态计算 table 宽度并设置，同时判断计算分配各 col 的 width 才能实现

[chaishi]

设置 table 元素本身的宽度，就可以达到 minWidth 效果。
否则原生 table 就支持 minWidth 了。

[btnkr]

这个需求会很有用

多个列同时设置min-width的时候，如果table宽度大于min-width总和，多余宽度按比例分配给各列，如果table可视宽度小于min-width总和，出现横向滚动条

在实际应用中，经常会出现需要在不同的可视宽度内需要表格列宽度合理的情况，比如有一列表头为状态，需要100px可以完全展示出来，如果固定width的话，在可视宽度很大的时候这一列会显得非常拥挤，如果不固定width这一列在可视宽度很小的时候甚至会换行。这个情况下如果指定min-width，在窄的时候不会让状态展示换行，在宽的时候按比例分配剩余宽度也不会显得很拥挤。

还有一种情况，表头的文字可能会比内容多，如果有min-width就可以自然地不让表头换行。

[chaishi]

还有一种情况，表头的文字可能会比内容多，如果有min-width就可以自然地不让表头换行。

宽度自适应，控制好 width 设置，同样可以做到 min-width 效果，同样可以自然地不换行。

此处和 antd 、原生浏览器 table 行为保持一致，不支持。

浏览器本身已经做了很好的宽度自适应，为了 minWidth 写一堆宽度调整的代码，收益不大

[cong-min]

最新版 Chrome 浏览器采用了 TablesNG 渲染架构， <col> 标签已支持 min-width 等属性设置，例子：https://jsfiddle.net/dgrogan/8x4j21ms/ （Safari尚未支持）

期望 TDesign 也能支持为 col 透传设置样式属性 min-width 等

---

• TablesNG 渲染架构介绍：https://docs.google.com/document/d/16PFD1GtMI9Zgwu0jtPaKZJ75Q2wyZ9EZnVbBacOfiNA/preview

• 判断浏览器是否为 TablesNG： https://tablesng.com/

---

其他信息来源：

https://bugs.chromium.org/p/chromium/issues/detail?id=120886

• 标题：min-width does not work on col
• 2012年3月30日发布
• 2020年6月9日回复：TablesNG will support column min-width.
• 2021年4月2日状态改为“已修复”

[chaishi]

如果原生浏览器开始支持，可以透传

[chaishi]

resolved in 0.45.1, published