Website Editing: Make table mobile responsive
Admin Level - Webmaster
The simplest form of making a table mobile responsive is to add a horizontal scroll bar to the bottom that appears when the table is wider than the width of the browser. The system automatically does this for New CMS users. Chameleon users can manually add the same code as follows.
- Go to the page with the table.
- Click Edit in the upper right of the content.
- Click the Source button.
- Add the below div tags before and after the table code.
- Click Save Changes.
Note to Mac users: Depending on your settings, the scroll bar may be hidden by default and only show when you scroll horizontally.
Having said all that, there are other methods you can use that may be more appropriate for the data used. See the CSS-Tricks article, Responsive Data Tables (Google that phrase for even more solutions). New CMS users can use the Source > Stylesheet tab to add the CSS code. Chameleon users will need to wrap the CSS code in <style> tags.
Add/edit a table