[Bug Report]table组件在定义

[Siqilucky]

Environment

IOS和安卓/chrome浏览器(最新)/vue2

Reproduction link

https://baidu.com

Steps to reproduce

table的columns属性。在定义某一列宽度属性为minWidth:150时。在iOS手机的chrome浏览器上内容会被显示全。
而在安卓手机的chrome浏览器上，这个内容就会被截取以...结尾，显示不全。

What is expected?

我期望的是两个端可以显示一样。不可能我所有的table都要去判断安卓还是ios再去定义宽度

What is actually happening?

安卓的table内容会被截取

---

1

[dosubot]

Hello @Siqilucky! I'm here to help you with bugs, answer questions, and assist with contributions while you wait for a human maintainer. Let's tackle that issue together!

The issue you're experiencing with the table component, where content is fully displayed on iOS but truncated with ellipsis on Android, might be related to how different platforms handle CSS properties like overflow, text-overflow, and white-space. These properties can behave differently across platforms, leading to inconsistencies in text overflow handling ^[1].

To address this, you can try the following:

1. Check CSS Properties: Ensure that the CSS properties overflow: hidden;, text-overflow: ellipsis;, and white-space: nowrap; are consistently applied across all platforms. These properties are crucial for managing text overflow and might need adjustments to achieve consistent behavior.

2. Use the ellipsis Property: If not already used, enable the ellipsis property in your table column configuration. This ensures that text is truncated with an ellipsis when it overflows, and it should be consistent across platforms ^[2].

3. Tooltip for Full Content: Consider enabling the tooltip option for columns where content is truncated. This will allow users to see the full content on hover or tap, providing a consistent user experience across devices ^[2].

These steps should help in achieving more consistent rendering across iOS and Android devices.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}