Hello, I’ve made a fairly large Html Table (5 columns) and it looks great on the desktop. But on my phone, and with Chrome mobile view inspector it only shows 3 columns at most (Stops at the Type). Can you help me make this table responsive like the rest of the website? Because I’d like for my users to be able to see all the 5 columns on their phone as well.
Here is the link of the table https://gamerdiscovery.com/dofus-rhineetle-guide/#species
I can also add the table into TablePress plugin if that makes it any different, I tested that as well but TablePress doesn’t manage to make it responsive either because the theme forces the Table to a certain width or something.
Hi,
While it may look nice on desktop, that table is not suited for mobile. That many table columns will not fit properly on mobile. Also I see that non-responsive fixed values in px are used. I tried, but there would be no way to fit that table on a small screen and also maintain a decent design on it
– https://www.screencast.com/t/7cZ3vtx3
The theme has some design for it and will try to make it responsive
– https://www.screencast.com/t/JEcz79e0wDhz
But that may not work with all tables.
What you could do is to create an additional table more optimized for smaller devices. I could give you a code to hide this one for mobile and display that one instead, if you should consider that a solution.
Thanks
Hi, yes you can give me a code to swap table when on mobile.
I would also consider a solution if possible to just hide the whole appearance column when surfing on mobile if that might make the table show the other columns.
Or make the table sort of scrollable if you know what I mean, like.. Now it shows 3 out of 5 columns on a phone, then a person could swipe left/right inside the table to show the other columns and hide the other two, if that can be done.
Sorry I’m a newbie so I don’t know what and how it can be fixed…
This code will remove it on mobile for example
@media (max-width: 767px) {
.Rhineetle {
display: none;
}}
The code has to be entered here – https://www.screencast.com/t/papIv5w5
If you create a new table and place it in the post content, you could use a new class. Then hide it on desktop, for example
@media (min-width: 767px) {
.Rhineetle_mobile {
display: none;
}}
This should work. I tried to make the table to scroll but with no results. It could be possible with enough time. You could search online for the best way to create a responsive table, there could be valuable tips.
Thx, the 2nd code, to hide the table on desktop, I place it in the advanced css area for desktop or both codes inside mobile?
Sorry wrong screenshot, I initially thought of a different method. It would be best to enter both codes in the default custom CSS field
– https://www.screencast.com/t/GL3OVgunvF
This way the codes will apply better, for example the first code will remove the table for all smaller devices (phones) while entered like this.
From what I can see the table displays better starting from tablet widths so you could keep it
– https://www.screencast.com/t/6Bkag4U193
Maybe you have some other idea however, this may not be what you want.
