Table content cut off

Tabs does not control table styling

The Tabs app does not automatically apply widths, borders, colors, padding, font sizes, or any other styles to tables. The appearance of tables, and all other tab content, is set by the theme.

To reduce the sizes of tables or change the way they look, please contact your theme developer.

Tab content automatically expands horizontally to fill 100% of the available space.

The available space is controlled by the theme and is usually a column between 300px and 600px wide. You can learn more about how the tabs react to the available space in the layout settings article.

If the theme didn't place the tabs in a column then the tab content would be the width of the entire screen.

Content that is wider than the theme's content column, such as a long line of text, wraps to multiple lines.

Table content cut off due to the table being wider than the theme column
Table content cut off due to the table being wider than the theme's column

Tables are not able to wrap to multiple lines, so if their minimum width is wider than the theme's content column, they will be cut off.

The image below shows two tables, one outside of the tabs and one inside of the tabs, and how each one is cut off identically because of the width of the theme's column. The table inside of the tabs being cut off is not caused by the tabs.

To prevent table content from being cut off, you can remove width attributes , set table widths to auto, show content outside of the column, move the tabs to a new location, and/or change the table to a responsive HTML structure .

Remove width attributes

Shopify's rich text editor commonly adds a fixed width to the table tag, and that prevents the table from being able to shrink down to fit the content.

If you view the HTML of the table and the table tag has a width attribute, like this:

<table width="692px">

</table>

then try removing it, so that the table tag looks like this instead:

<table>

</table>

Set table widths to auto

To override any width attributes and set all table widths to auto, add this custom CSS into the app or into the theme:

.station-tabs-content table,
.station-tabs-content td {
  width: auto !important;
}

If you're not sure how to add custom CSS into the theme, you can ask your theme developer.

Show content outside of the column

By default, content that extends outside of the theme's content column is hidden. To make the content visible, add this custom CSS into the app or into the theme:

.station-tabs-content {
  overflow: visible !important;
}

If you're not sure how to add custom CSS into the theme, you can ask your theme developer.

Move the tabs to a new location

If a table can't be made to fit within the available space, you can move the tabs to a location that has more space.

For example, instead of showing the tabs in a narrow column on the right side of the screen, you can move the tabs to a full-width column below the product images.

Change the table to a responsive HTML structure

HTML table elements can not be made responsive (meaning they can't change their layout based on screen size or available space).

Most themes have responsive HTML structures, or grids, that can be used instead of a basic table element so that the content can adapt to smaller screens or content columns.

To find out what options are available to you, you can ask your theme developer if the theme has a way to make table elements responsive, or if it has a responsive grid system that can be used instead of tables.

Still need help? Contact Us Contact Us