-
Posts
-
Hi,
I want to highlight that the table works beautifully when it is shown in desktop mode, but fails when it comes to responsive mode. I’m speaking to a two column table format. I have not tried a larger format table.
From what I can tell, the table element in Enfold takes the second column and places it below the first column when it is in responsive mode. This makes it difficult for someone to correlate information from the first column to the second column of the same row.
I have created an old school way of tables using HTML code and I got the desired result in terms of having both columns side by side on a mobile device.
How can this be done with Enfold’s built-in table element?
sl
Hi slui!
Your link is giving me a 404. Are the headings not lining up with the correct cells?
Best regards,
ElliottSorry…it is working now…
So I have two tables…one is the HTML and the other is Enfold Table element. Change your browser to reflect a mobile device and you’ll see what I mean by the second column of the Enfold Table element being placed below the first. When compared to the HTML table, both columns are side by side.
Hey!
Please edit the theme’s table element. Set the table purpose to tabular and the responsive styling to scrollable.
Regards,
IsmaelHi!
I checked your website on Safari, Firefox and Chrome on OS X 10.10 but i cannot see scroll bar below your table element. Can you please flush browser cache and refresh your page and check if that helps. If not, please post a screenshot of the issue
Best regards,
YigitHi Yigit,
The page is up and running. You can see that the second table is scrolling side to side. However, I want it to look like the first table.
sl
Hi!
Ah. Yes, unfortunately, that is the default behaviour of the table when set to scroll.
Cheers!
IsmaelHey @codemode,
What are you having problems with? Please link to the site in question an post a screenshot if possible.
Thanks,
RikardIf you use the table as tabular data, the cells get mixed up and don’t align correctly in responsive mode. Desktop is ok, but when viewing on mobile, the responsive nature takes the horizontal data from left to right and stacks it top to bottom (at which point the data is no longer arranged intelligently). And, I don’t want to make the table scrollable from left to right on mobile because of the undesirable experience.
The pricing table layout seems to work correctly on mobile, but I am unable to use that format for tabular data.
Do you still need a screen shot or can you duplicate the issue?
Hey!
please provide us a link where we can see the issue. You can add screenshots to make things clear as well (imgur.com, dropbox).
Regards,
AndyHere’s a basic example of what happens when you use tables as tabular data, select adjust to screen size, and then view on desktop and mobile. As you can see, the cells in the mobile table stack incorrectly.
Hi!
not sure what you mean, because table in your screenshots looks good to me. How do you want it to look like instead?
Regards,
AndyHere’s a quick photoshop job to better illustrate the table sections and how they are arranged.
It would make more sense, and easier to read on mobile devices, if the table stacked as pictured for the “ideal solution” with spaces between each section. The 2nd solution pictured far right works as well.
Does that help?
Reading this thread I must conclude that the tables of Enfold are not responsive! I experienced this making a price table for a client.
This means that the tables in Enfold are useless. That is a shame for this fantastic theme. What is the solution? Should I use an Excel table? Or should I make a picture of my tables anf publish them as png or gif elements?
Thnks for your help.I just found a simple solution. Just make a table in Word and copy this table to Enfold. The table is perfectly responsive!
Check: http://barberyclinic.nl/prijzen/ for the start of a large pricelist.Thanks for the tip Joost! Appreciate that.
My only thing with the Word table solution is that if you have many columns (3 or more), the columns become super narrow and the data is a little hard to read as it wraps in long vertical cells. Not so great on a small mobile screen. :/ Would be best to stack the table, however, that would require a fancy plugin like TablePress (+ their paid responsive extension) – but I’d rather not pay to add another plugin for my simple use case.
Was hoping that the great coders at Enfold could address or fix.
Hey!
It depends on how you build the table. Make sure the headings line up with the data cells. For example if you have one blank heading cell at the start then it will create an offset on mobiles. See here, https://kriesi.at/support/topic/bug-table-headers-applied-incorrectly-on-media-query/#post-387990.
Regards,
ElliottHi Elliott,
Thanks for the reply but all the headings line up with the data cells. It appears to be a bug as it should behave similar to the responsive tables in the TablePress plugin.
Any other ideas?
Hi there,
A little late to this tables party.
I’m having the same issue with my tabular table and mobile responsive layout. I’m not sure how my table could become responsive since the table is X’s and Checkmarks. I’ve tried the pricing table layout as well, but same issue, do you see any alternative to get this type of table to respond to smaller screens without having to move left to right.Any ideas or help would be appreciated!
-Mary
- You must be logged in to reply to this topic.