The Mobile Layout Break: Solving Non-Responsive Tables in PrestaShop

By Christian Fillion E-Commerce Strategist & Founder, Marketing Media

---

In technical e-commerce, the product specification table is the primary tool for customer decision-making. However, standard HTML tables are inherently rigid. When a table built for a 1200px desktop screen is forced into a 375px smartphone viewport, it either bleeds off the edge of the screen or compresses the text until it is unreadable.

This layout break is a critical failure in the mobile user experience. If a customer cannot read the specs, they cannot verify compatibility, leading to abandoned carts and a high bounce rate on your most important conversion pages.

The Technical Root: Fixed Widths and Table Logic

The issue typically stems from how PrestaShop’s TinyMCE editor or specific themes handle table markup in the product description field.

• Fixed-Pixel Constraints: Many tables are generated with inline styles like <table style=”width: 800px;”>. This hard-coded value prevents the browser from scaling the element down for smaller screens.
• The “Squish” Effect: Without specific CSS instructions, browsers try to fit all columns into the available width. For tables with 5+ columns, this results in vertical text strings that break the visual harmony of the theme.
• Overflow Handling: By default, HTML containers do not always provide a scrollbar for child elements that exceed their width, leading to the “horizontal scroll” bug that breaks the entire page’s alignment.

Technical Execution: Implementing Responsive Overrides

To fix non-responsive tables without manually editing every product page, we implement a global CSS and JavaScript strategy.

1. The Wrapper Method: The most reliable fix is wrapping tables in a responsive container. Using a simple script, we target all tables in the .product-description class and wrap them in a <div class=”table-responsive”>.

CSS Rule:
CSS
.table-responsive {

    display: block;

    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

}

• This allows users to swipe left and right on the table itself while the rest of the page remains stable.

2. Stacking Tables (Attribute-Based): For simpler tables (2-3 columns), we use media queries to change the table display to block. This “stacks” the table cells vertically on mobile, turning each row into a standalone card.

CSS Rule:
CSS
@media (max-width: 767px) {

    table, thead, tbody, th, td, tr { display: block; }

    td { position: relative; padding-left: 50%; }

}

3. Removing Inline Styles: We use a PrestaShop hook (actionProductModifier) or a global search-and-replace to strip width and height attributes from table tags, forcing them to inherit the 100% width of their parent container.

PrestaShop Diagnosis: Identifying the Break

• The Inspect Tool: Use Chrome DevTools (F12), toggle the mobile view, and look for the horizontal scrollbar at the bottom of the screen. Identify the <table> element causing the overflow.
• Template Audit: Check product-details.tpl. If your specifications are pulled from “Product Features,” ensure the theme’s feature list is using a dl (definition list) or a Bootstrap grid instead of a standard <table> tag.

A technical product should be easy to inspect on any device. By implementing responsive table logic, you remove the final barrier between your data and your customer’s purchase decision.

SCHEDULE YOUR STRATEGY CALL