The Comparison Table widget offers a versatile solution for modifying table behavior on mobile screens, granting you the flexibility to customize the widget's display according to your preferences. Here's a step-by-step guide on how to make this customization:
- Navigate to the Look & Feel section, then open the Advanced tab, where you'll find the Mobile Devices Behavior option.
- Within the Mobile Devices Behavior option, select from the options available in a drop-down menu your desired option.
To understand the difference between these options, let's first look at the default table layout, not optimized for mobile screens:
Now, let's go through the options available:
- Collapse by Columns: This option functions as a responsive design, where each comparison highlight is stacked on top of each other. The title becomes the first row, and each row below shows the corresponding row's information.
- Collapse By Rows: Similar to the "Collapse by Columns" option, but here, the title becomes the first column, and each row below shows the corresponding column's information.
- Scroll: This option is not as responsive as the previous two, where the table doesn't adjust to fit the screen. Mobile users have to scroll sideways to see more of the table.