Web Page Builder: How Tables, Columns and Rows Behave on Mobile Devices
The admin of the site can use tables within Froala editors to add content and style to static web pages on the site.
Sometimes, a table can look good on desktop view but when you see it on mobile devices it doesn't. That's why here we are going to explain the behaviors of tables on mobile devices.
For example, we have this table in the Froala Editor, it has 2 columns and 4 rows:
Desktop view
2 columns and each row show up correctly:
Mobile view
One column and rows are merged:
Even though the data is not being displayed in columns on mobile, this is how tables work by default. So in order to show the content correctly on mobile, there are two options:
Option 1
Create a table with one row and two columns, then add all the content inside these 2 rows:
It will display like this on mobile devices:
NOTE: Make sure the content has the same lines of text on the left and right sides to avoid extra white spacing on mobile.
Also, make sure to select the Vertical Align >> Top:
Option 2
The second option is to create a table with 2 columns and one row:
Click inside the left column and then click on the "Insert Table" button to add 4 new rows:
It should look like this (See the screenshot below).
Please do the same with the right column
Add the content on each row and column:
It will look like this one mobile:
NOTE: Make sure the content has the same lines of text on the left and right sides to avoid extra white spacing on mobile.
Also, make sure to select the Vertical Align >> Top:
To learn more about tables, please read this article: Froala Editor - Tables
