Is there a way to standardize the size of a table with 2 columns the same width?

[Mark3347]

Is there a way to standardize the size of a table that has 2 columns the same width so that all product pages that have tables in them would be the same size?

[GemPages]

Hello @Mark3347

To provide you with the most precise solution in this case, could you please share your page URL ( with pass if your store password is enabled )?

Thank you and hope to hear from you.
Best regards,
GemPages Support Team

[Mark3347]

Here is one

https://arcticsealwinecoolers.com/collections/refrigerators/products/summit-ff63bkbiif-24-wide-built-in-freestanding-panel-not-included-all-refrigerator#specifications

Hope this is what you’re asking for.

[BSS-Commerce]

Hi @Mark3347

To make 2-column tables the same size, you can try the following:

1. Online Store → Themes → Edit Code


2. Find the theme.js file, add this code at the end of the file, and click Save:

...
document.querySelector('.spec_table').removeAttribute('style');

Your tables will be the same size:

We hope that this can help you.

[Mark3347]

Thanks! That worked. Is there a way to specify how wide I want the columns to be? Currently they are the full width of the desktop screen. I’d like them to be around 600px total, 300px per column, about 1/3 of the screen in width. Is this possible?

Also, is there a way for tables to wrap text automatically on mobile devices so the customer doesn’t have to scroll side to side?

[BSS-Commerce]

Hi @Mark3347

Please follow these steps:

• Find the theme.css file, add this code at the end of the file, and click Save:

table {
    width: 600px !important;
}
table tr td {
    width: 300px !important;
}
@media screen and (max-width: 400px) {
    table{
         width: 100%;
     }
}

• Here is the result:

We hope that it will work for you.

[Mark3347]

Yes! This works great for tablets and desktop, but the table is still too wide for a mobile phone. I tried tweaking the numbers for the mobile screen and width, but I didn’t see any change. I added a link below for you to use on a mobile screen. Ideally, I’d like to have the table width narrow enough to not have to scroll side to side to see all of the information. Maybe the text can wrap with the narrower columns?

Thanks again!

This theme is not published yet. It is Dawn 8.0

https://6iolm0uxl73dbvd7-43245961371.shopifypreview.com

[BSS-Commerce]

Hi @Mark3347

With your problem you can do it this way:

@media screen and (max-width: 400px) {
    table{
         width: 100% !important;
     }
    .rte table {
         table-layout: unset !important;
     }
}

• Here is the result:

We hope that this can help you.

[Mark3347]

Fantastic! Thanks so much!