On mobile, there may be tables with shorter text or fewer columns, and tables with more text or more columns.

Tables with Shorter Text or Fewer Columns 

Tables will display on mobile devices similarly to how they display on computer screens.

Issues that might arise:

• Text and words are stacked, and words can be broken up to fit the screen. A table that might have text in one or two lines on a computer monitor could easily turn into three to four (3-4) lines of text on a mobile device.
• Words that are split up are not divided based on any English best practices (i.e., splitting words at a syllable or adding a hyphen (-) to indicate that the word has been broken.)
• It is not entirely possible to decide which tables will stay in their monitor table form on a mobile device because it differs between devices, screen size, browser, and text size setting (controlled by the user.)

Tables with More Text or More Columns

These tables are being altered and reoriented. The header row is applied to each column, and then the column is presented in a block.

Example - Computer Screen

The above example is a table from a computer screen. On a mobile device, the table will reorient to resemble the below example.

Example - Mobile Device

The header is copied to appear in front of each piece of table data it applies to, and table data that appears in the same row is grouped together. This table reorientation resembles a bulleted list more than a table.

This table is still readable but causes confusion when tables with less text remain in their monitor form and tables with more text and that prompt reorientation appear on the same page. 

Viewed on the webpage, this page looks clean and readable, albeit long. On a mobile device, however, two tables that convey similar information have been oriented and transferred very differently because of the amount of text they contain.

Return to Article Navigation

Issues With Longer Tables 

• Reorientation is confusing if it coexists with shorter tables that remain in their original form
• The reorientation currently does not add a space between the table header and the table data.
• There is not a clear and consistent visual line separating the information, which is usually an advantage of a table.

Recommendations

• To avoid confusion, it is recommended that customers do not have multiple tables of varying lengths on a page. The problem is tables with a lot of text in them - so simple tables containing only a few words and numbers should be fine.
• Complex tables containing big blocks of text can be created in word, marked with the correct code for screen readers, and then converted to PDFs so that their formatting stays consistent between all mobile and desktop devices and also remains compliant for users with disabilities.

Return to Article Navigation

Mobile Responsive Code

To make tables in the Editor widget more mobile responsive, you can add the following code before the opening table tag. 

<div style="overflow-x:auto;">

Here's an example of how that looks in the editor widget code view: 

Return to Article Navigation