Virginia Tech®home

How Do I ... Fix a broken mobile table

Sometimes tables can appear oddly on mobile. Check to make sure there aren't any additional width and height attributes on the table cells that may have been added during editing in the Text component. The responsive web and the themes in the CMS don't really like fixed widths and heights, so things can break easily if they are added. Here's how to edit a table in a text component to remove unneeded attributes.

Click on the Text component with the offending table and then click the Edit (pencil) icon

Click on text component and then Edit (pencil) icon
Click on text component and then Edit (pencil) icon

Click the Fullscreen (expand) icon to access the fullscreen text editor

Click the Fullscreen (expand) icon to access fullscreen text editor
Click the Fullscreen (expand) icon to access fullscreen text editor

Click on the HTML view, far-right toolbar icon

Click the HTML view button, far-right in toolbar
Click the HTML view button, far-right in toolbar

Either copy the table elements out of the text editor and manually edit them, or just remove any width and height attributes from the code

Edit HTML attributes in table elements
Edit HTML attributes in table elements

The final code should look something like the example image. No additional attributes on the table HTML elements.

Table elements should have no additional attributes when done
Table elements should have no additional attributes when done

To save, click the HTML view icon again, then click the Collapse icon to return to the inline editor. Then click the checkmark in the toolbar to save the changes.

NOTE: If you collapse the window while in HTML view changes will not be saved. It is important to follow the closing and saving steps precisely.

Test your table in your page via View as published in the Page Information menu.