ant3.0.0的Table组件在移动端样式错乱

[nai6514531]

Version

3.0.0

Environment

3.0.0 react15.6.0

Reproduction link

https://ant.design/components/table-cn/

Steps to reproduce

官网的例子就可以重现

What is expected?

可以正确显示ui

What is actually happening?

Table组件在移动端样式错乱

[ant-design-bot]

It will be better to write your issue/comment in English, so more people can understand you.
And this means that more people can help you or benefit from your issue/comment.
See: #4897

[yesmeck]

不建议在移动端用 Table，移动端的支持优先级比较低，如果有需求，欢迎给我们 PR。

[wangbagang]

不知道有没有好的解决方案，项目用的2.x，现在升级到3.0移动端样式全乱了，以前好好的，希望官方可以出一个解决方案！

[nai6514531]

看样子是优化过的。只是还没接受这样的表现~

[wangbagang]

如果有右边固定的或者左边固定的列，样式就更丑了，或者表头文字居中显示，真是一种灾难！2.x那种不是挺好的吗，为什么要修改成这个样子？目前只能通过覆写样式回到以前的效果！

[afc163]

参照 https://semantic-ui.com/collections/table.html 做了响应式的优化。

[nai6514531]

增加一个可选的配置项。可以回到2.x那样的展示

[afc163]

这么窄的空间，展示起来会不会太挤？

[wangbagang]

@afc163 不会的，在2.x表现如下


还是比较完美的，移动端可以滑动看响应的数据，3.0现在这种header完全对不上，另外如果有fixed的话就无法显示了，ant官网就可以看具体的效果，缩小至手机版的看看

[afc163]

Fixed 列的表格不做这个响应式优化，是不是就能解决你的问题。

[wangbagang]

@afc163 这样子其实也不行的哦，现实中有很多的表格header是很长的，有十几个甚至几十个，这样子的表格如果以现在的column（从上到下）的展现方式表现出来，那么我看到数据的时候就不知道数据对应的header是什么（这点很让人抓狂）！

[afc163]

有很多的表格header是很长的，有十几个甚至几十个

如果是这样也没有 fixed columns 的话，应该也挤成一团了吧。

[wangbagang]

是的，总之目前这种展现方式在移动端确实很不友好。

[afc163]

我先去掉这段优化好了。

[wangbagang]

Thanks， 辛苦了！

[kossel]

我把Table 封包了一下，如果加responsive prop会以类似List 的方法显示
https://kossel.github.io/bsa-ui-2-doc/#!/Table/23

[afc163]

@kossel 看上去不错，@wangbagang 看看这样的响应式方案是不是可以接受？

[wangbagang]

@afc163 我觉的添加一个mode参数更好，mode可选参数有‘normal, responsive, list’等等，这样子有很大的灵活度，也好扩展，有的时候类似list的显示方式会好点，有时候normal好点，把这个选择权交给用户，我们ant只提供选项。

[keke122765]

@afc163 我觉的添加一个mode参数更好，mode可选参数有‘normal, responsive, list’等等，这样子有很大的灵活度，也好扩展，有的时候类似list的显示方式会好点，有时候normal好点，把这个选择权交给用户，我们ant只提供选项。

list有没有实现呢

[afc163]

ant-design/ant-design-pro#1755 (comment)