Viewing on mobile - I have an embedded table on a website, how can I make it work on the mobile version of the website?

[Lizzie]

I doubt I am asking this question correctly but I hope if I explain the issue you will be able to help solve it.  I have a few tables embedded in my website, however they aren't viewable in the mobile version.  I tried to look it up but it seems that I need to be able to code, and I have no idea how to do that.  

I went to "Styles" --> selected "field"-->but then it told me to go to "source" and that's where I got lost, can anyone help?  Thanks!

 

[ParkLoey]

Hi @Lizzie! Can you explain more about the DataPage being not viewable in mobile version? If you are referring to the tables not looking appealing in mobile version, I believe by default, or at least if you don't uncheck the "Enable Responsive" option, it should work/look okay and automatically adapt to the screen size. If this is already enabled, maybe the problem is on the website where you embedded it.

https://howto.caspio.com/datapages/responsive-datapages/responsive-datapages/

I hope this gives you an idea  

[Annyjones01]

To make an embedded table work effectively on the mobile version of your website, you can follow these steps:

1. Use a responsive design framework: Implement a responsive design framework like Bootstrap or Foundation that automatically adjusts the layout and appearance of your table based on the device screen size. These frameworks provide responsive grid systems that make it easier to create mobile-friendly layouts.

2. Consider a mobile-first approach: Design your table with a mobile-first approach, which means focusing on the mobile layout initially and then adapting it for larger screens. Start with a simple, single-column layout that is easy to read and interact with on small screens.

3. Optimize table layout: Simplify the table by removing unnecessary columns or data that may not be relevant for mobile users. Consider using vertical stacking or horizontal scrolling techniques to accommodate larger tables on mobile devices without cluttering the screen.

4. Use responsive tables: Implement responsive table solutions that allow users to scroll horizontally or swipe to reveal additional columns on mobile devices. You can use JavaScript libraries like DataTables, FooTable, or responsive table plugins to achieve this functionality.

5. Enable touch-friendly interactions: Ensure that the table is easy to interact with on touchscreens by increasing the size of clickable elements such as buttons or links. Use touch-friendly gestures like swiping or tapping for sorting or navigating through the table.

6. Test thoroughly: Test your table on various mobile devices and screen sizes to ensure it displays and functions correctly. Pay attention to readability, usability, and performance to provide the best mobile experience for your users.

By implementing these steps, you can optimize the display and functionality of your embedded table for mobile users on your website.

Please visit:https://www.janbaskdigitaldesign.com/blogs/importance-mobile-website/