Troubleshoot Composer: Tables are not mobile responsive

Misty Flowers

May 06, 2026 14:06

Tables that look great on your desktop may become cramped, cut off, or unreadable on mobile devices. The most common reason is that you created the table using the Tables button in the editor toolbar instead of copying a responsive table from your Style Guide. Toolbar tables are basic HTML tables with no mobile optimization. Your Style Guide contains pre-styled responsive tables designed to work on all screen sizes. This guide covers why tables become unresponsive and how to fix them.

💡 Quick answers

Why is my table cut off on mobile? The most common reason is you created the table using the Tables toolbar button instead of copying a responsive table from your Style Guide.
What's the difference between a toolbar table and a Style Guide table? Toolbar tables are basic HTML with no mobile optimization. Style Guide tables are pre-styled to automatically stack and adapt on mobile devices.
How do I check if my table width is set correctly? Right-click the table and select Table Properties. The Width should be 100%, not a fixed pixel number like 800px.
Should I use the Tables toolbar button? Only to manage tables you've already copied from your Style Guide. Never use it to create a new table from scratch.
How do I get a responsive table? Navigate to your Style Guide page, find the Tables section, and clone the element containing the responsive table. Paste it into your content.
What if my table has 4 or more columns? Large tables are difficult to display on mobile. Consider using a Layout Element with multiple columns or the Resources Module instead.

Responsive design issues

These are the most common reasons tables don't display properly on mobile devices. Start here if your table looks good on desktop but is broken on mobile.

Table is cut off or cramped on mobile

A table that looks perfect on desktop may become cramped, cut off, or unreadable on mobile if the width isn't set correctly.

Check the table width. Right-click anywhere on the table and select Table Properties.
Look at the Width field. If it shows a fixed number like 800px or 1000px, that's the problem. Tables with fixed widths don't shrink for mobile screens.
Change the width to 100%. This allows the table to stretch or shrink to fit any screen size. Click OK to apply the change.
Publish and test. Save the Content element, publish the page, and view the table on a mobile device to verify it now responds to smaller screens.

⚠️ The 100% rule

Always set your table width to 100%, not a fixed pixel number. This is the most critical step for making tables responsive. A table set to 800px will always be 800px wide, even on a phone screen where there's only 375px of space.

Table doesn't stack or reflow on mobile

Some tables show all columns squeezed together on mobile instead of stacking vertically. This is a sign the table lacks mobile-specific styling.

This table was likely created with the toolbar button. Toolbar tables are basic HTML with no built-in mobile stacking logic.
The solution is to replace it with a Style Guide table. Delete this table and follow the steps in "How to fix an unresponsive table" to copy a responsive table from your Style Guide.

Table creation issues

If you created a table using the wrong method, it will lack responsive features. Check these sections to understand what went wrong.

Created table using the Tables toolbar button

The Tables button in the editor toolbar creates a basic, non-responsive HTML table. This is the #1 reason tables don't work on mobile.

What the toolbar button does. It inserts a blank table into your Content element. This table has no mobile optimization and won't adapt to smaller screens.
When to use the toolbar button. Only to edit tables you've already copied from your Style Guide. Use it to add/remove rows, change widths, or adjust cell properties.
Never use it to create a new table from scratch. Toolbar tables are not responsive. Always copy pre-styled tables from your Style Guide instead.

Pro tip

Your Style Guide contains responsive tables specifically designed by your site's designers. These tables already include mobile stacking, brand colors, and accessibility features. Using them saves time and ensures consistency.

Table has too many columns for mobile

Tables with 4 or more columns become difficult to display on mobile, even with responsive styling. No matter how you format it, small screens simply don't have enough space.

Best practice for large datasets. Use a Layout Element with multiple columns or the Resources Module instead. These alternatives are natively responsive and handle complex data better.
Keep tables simple. Limit tables to 2-3 columns. If you need more, consider breaking the data into multiple smaller tables or using a different layout approach.

Fix an unresponsive table

If you have a table that doesn't work on mobile, follow these steps to replace it with a responsive table from your Style Guide.

Step 1: Copy a responsive table from your Style Guide

Navigate to your Production Branch. Find and open your site's Style Guide page.
Locate the Tables section. Enter Compose or Edit mode and find the section with table examples.
Clone the table element. Hover over the element containing the responsive table and click the Clone button to copy it to your clipboard.

Step 2: Delete the broken table

Navigate to the page with the broken table. Open it in Composer.
Click into the Content element. Find the Content element containing the unresponsive table.
Delete the table. Highlight the entire table and delete it. Keep any surrounding text if needed.

Step 3: Paste the responsive table

Click Add Element on your page. or paste within the existing Content element where you deleted the old table.
Look for the cloned element in your clipboard. You'll see the table element you copied from the Style Guide.
Click Paste this Element. The responsive table is now added to your page.

Step 4: Customize and test

Click Edit Content to customize the table. You can now edit the data while keeping the responsive styling intact.
Update headers for accessibility. Right-click and select Table Properties. Set Headers to "First Row," "First Column," or "Both" depending on your table structure.
Verify width is 100%. Check the Table Properties Width field. It should be 100%, not a fixed pixel number.
Publish and test on mobile. Save the Content element, publish the page, and view the table on a phone or tablet to confirm it's now responsive.

Alternative layout options

Sometimes a table isn't the best way to present data, especially on mobile. Before settling on a table, consider whether other layout options might work better for your content.

Check out our "Extreme Site Makeover: Tables Edition" blog post for real-world examples of how to transform problematic tables into more mobile-friendly layouts. Here are some common scenarios and alternatives:

Too much information in one table. Instead of jamming everything into one wide table, flip the structure or break it into multiple smaller tables. A vertical table layout is often easier to read on mobile than a horizontal one.
Simple lists or schedules. If your data is basic (like class times or important dates), a bulleted list or accordion is often cleaner and more mobile-friendly than a table. You can also use tabs to separate different schedules.
Complex data that's hard to understand. Consider visualizing the data with a chart or graph instead. This makes patterns and comparisons obvious at a glance and works well on all screen sizes.
Calendar or scheduling information. Don't reinvent the wheel with a table. Use the Calendar element instead. It's mobile-responsive, offers multiple viewing options (month, week, day), and users can subscribe to updates.
Long lists of related information. Use accordion panels or the Resources Module. These allow visitors to focus on what they need without scrolling through everything at once.

Check out the full post to see 5 real-world examples of how schools transformed problematic tables into better layouts using Composer elements. You'll see before-and-after comparisons showing how to handle too much information, overformatted data, hard-to-read schedules, cafeteria menus, and lists of links.

Best practices for tables

Follow these guidelines to ensure your tables work well on all devices.

Always copy from your Style Guide. Never create tables from scratch using the toolbar button. Style Guide tables are pre-optimized for mobile and include your site's branding.
Set width to 100%. Always use Table Properties to confirm the width is 100%, not a fixed pixel value.
Keep tables simple. Limit to 2-3 columns. For larger datasets, use a Layout Element or the Resources Module instead.
Define headers for accessibility. Use Table Properties to designate headers. This helps screen readers understand the table structure.
Test on actual mobile devices. Always preview your table on a phone or tablet before publishing. Desktop previews can be misleading.
Use the toolbar button only to edit. Once you've pasted a responsive table from the Style Guide, you can use the toolbar button to modify rows, columns, and cell properties.

Troubleshooting checklist

Work through this checklist to diagnose why your table isn't responsive.

☐ Table width is set to 100% (not a fixed pixel value like 800px)
☐ Table was copied from your Style Guide (not created with the toolbar button)
☐ Table has 3 or fewer columns
☐ Headers are properly defined in Table Properties for accessibility
☐ No extra formatting from copied data (Excel, Word, Google Sheets)
☐ Page has been published and changes have gone live
☐ Tested the table on an actual mobile device (not just a desktop browser resized)

If the table still doesn't display correctly after checking all these items, contact Finalsite Support. Toolbar tables are not responsive. Style Guide tables are. Always copy responsive tables from your Style Guide, set width to 100%, keep columns to 3 or fewer, and test on mobile before publishing.