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 with Christian Fillion]