To ensure that tables fit nicely onto pages, edit table widths using percentages instead of pixels (px).
To edit widths:
- Open the page or post that contains the table you wish to modify.
- Click within the cell you wish to edit.
- Click on one of the following icons:
Edits a single cell, a set of rows, or all cells in a table. Edits a single cell, a single row, or all cells in a table.
- When editing the width or height, make sure to enter a number in percents (%).
*If numbers are not entered as a percent, they will automatically be converted into pixels, which is not well-supported on mobile webpages.
As an extra measure:
- Click on the HTML view tab.
- Perform a search for “px” (Ctrl + F in Windows; Command + F in Mac)
- Replace any numbers in px form to a percentage.
E.g. Change “750px” to “100%”.
General tips and considerations:
- Always use the “cutable” class.
- Your table should have no more than 5 columns. Content in tables with more columns than this may not appear in the mobile version of your website.
- If your table is content-heavy or has 5 or more columns, include a link to a PDF of the table. This ensures that content in the table is still accessible to readers, even if the format of the table breaks.