I work as Senior UI & UX Designer for App’n’roll — a Warsaw based venture building company.

As you may know, today’s design requires taking care of various types of screens and sizes so we designers have to make the results of our work as responsive as possible. That may cause some problems, especially when it comes to fitting a huge amount of data into narrow mobile phone interfaces.

现在的设计需要考虑多种设备和不同尺寸的屏幕，设计师需要让结果尽量根据不同显示屏幕自动的调整页面的布局和内容。
这样会有一些问题，尤其是在窄窄的屏幕上显示大量的内容。

The reason I decided to share the solutions with you is the fact the most common things I struggled with were data tables.
我常遇到的就是数据表的问题，因此我想和大家分享这个解决方案。

I found 5 common solutions to handle data tables on wide screens such as smartphones or tablets in vertical mode. You can use it immediately in your daily work as a designer — let’s go!

1. short 会丢掉一些数据
https://www.bloomberg.com/markets/stocks/futures

add class "hide-on-mobile"

2.Mobeable，可移动动的table
https://codepen.io/karks88/pen/jGrjdW/

3.collapsed
第一列不动，其它列可移动。

4. Transformed 行和列转换
https://elvery.net/demo/responsive-tables/

5.comparing 对比

https://www.vizio.com/en/home



from：https://medium.com/appnroll-publication/5-practical-solutions-to-make-responsive-data-tables-ff031c48b122