How to customize a page with a table?

Question

css

Hello.
The client wanted to design a sign.
Here's what happened https://vk.cc/6nbKaR
But on mobile and tablets we don't know how to adapt it.
Help advice. Thanks in advance.

Answer 1

With this table, there is only one solution.
Wrap it in a div and give it overflow-x: scroll.
Those. make the table the only element that can be scrolled horizontally.
Here the table is complex and it is impossible to rebuild the elements without losing information content.
Well, if you want to get confused, then you are here https://css-tricks.com/responsive-data-tables/

Answer 2

It's not just the table. If the closed one can still be placed on a mobile screen, then when you click on a line, a lot of different information opens, as already noted, complex.
In general, for mobile I would think about a separate design/layout.
PS. By the way, it looks cool and beautiful for such a technical site!

Answer 3

Gennady Dorokhin do you happen to need a layout designer for your company?)
so that there are no questions about how to make tables and other elements adaptable))

Answer 4

* for narrow screens, remove padding to a minimum.
* stack columns too wide
https://drive.google.com/file/d/0B9B9F2yBkwWLQXJYd...

Answer 5

frontender.info/simple-responsive-table

Answer 6

1. Simple : wrap and scroll.
2. Complex : change the number of cells. For example, leave only the name, show the rest of the information when the card is expanded. Or arrange "jars" in a column. Etc.

Answer 7

Smoke and my version
https://bugoaneo.github.io/ashtanga/#tickets
If anything - write in a personal, I'll give the code.)))