Skip to main content

The responsive table display

theresa manzo
Written by Theresa Manzo
Product Manager at MindTouch
This page applies to:MindTouch Responsive

Tables created before implementation of this responsive option need to be manually updated through the editor's table dialog. Existing tables are not updated retroactively and will display as originally entered.


In MindTouch, newly created tables are automatically set to responsive so that they resize and better fit screens for mobile devices. This means you reach more of your audience by having your content look good on all devices. A responsive table displays differently on smaller screens based on a few factors such as column headers, row headers and number of columns. 
 

Column headers


For responsive tables with column headers, the headers will move to the left of the table with their content table cells displayed to the right when viewed on a smaller screen.

Large screen view

A screenshot of a responsive table with column headers in large screen size.

Small screen view

A screenshot of a responsive table with column headers in small screen size.
 

Row headers


For responsive tables that use row headers, the table displays move the headers above the row inputs when viewed on a smaller screen.

Large screen view

A screenshot of a responsive table with row headers in a large screen view.

Small screen view

A screenshot of a responsive table with row headers in a small screen view.


No headers


Similar to the column header display, when a responsive table has no headers, the content will shift to a single column, vertical display when viewed on a smaller screen.

Large screen view

A screenshot of a responsive table with no headers in a large screen view.

Small screen view

A screenshot of a responsive table with no headers in a small screen view.
 

More than five columns


If your responsive table consists of more than five columns, it will switch to the smaller screen display around tablet size.

Large screen view

A screenshot of a responsive table with more than five columns in a large screen view.

Medium screen view

A screenshot of a responsive table with more than five columns in a medium screen view. 
 

Row and column headers


We do not recommend using both row and column headers with the responsive table setting. That type of table display is difficult to render well in smaller screen sizes. When used with the responsive option, tables are rendered with only column headers visible.
 

What's next?


Read our best practice article on how responsive tables increase user engagement.

  • Was this article helpful?