Table content does not all show

Overview

Minimum table width

The minimum width of a table is determined by many factors, including:

• Width values set for the the table, table cells, and/or table content. The values can be set in the table HTML or by theme styling.

• The amount of cell padding set by the theme stying.

• The number of columns in the table.

• The minimum width of the content in the columns.

Content area

The content area is set by the theme and is usually the full width of the screen on small screens, and a column between 300px and 700px wide on large screens.

If the minimum width of a table is greater than the width of the content area, the table will not completely fit in the content area.

For example, if the content area is 500px wide, then none of these will fit:

• A table with a width set to 700px.

• A table with 6 columns that are each 100px wide.

• A table with 1 column that contains a 900px wide image.

When a table does not completely fit in the content area, any of the following can happen:

• Table content outside of the content area does not show.

• The entire page scrolls horizontally.

• Tab titles extend past the edge of the screen.

• Other tab content extends past the edge of the screen.

These issues are not caused by the tabs, and they are not related to the tabs in any way. They would occur whether or not the table is inside of a tab, as shown in the image below.

Resolutions

Remove fixed widths

The most common reason that tables are too wide is that a fixed width, usually in pixels (px), has been set on the table, table cells, and/or table content.

Fixed widths can be unknowingly set by Shopify's rich text editor, especially when resizing columns, but they can also be included with content that's pasted into the editor.

To remove fixed widths, view the HTML for the table and take out any width attributes that look like this:

<table width="700px">

and any width declarations inside of style attributes that look like this:

<table style="width:700px">

from the table, table cells, and/or table content.

If you need to assign width values, use percentages instead, like this:

<table style="width:100%">

Make table widths fluid

Make table and table cell widths fluid to allow tables to compress horizontally until the minimum width of the content in each cell is reached.

To make table widths fluid, add this custom CSS code into the Tabs Studio app or into the theme:

.station-tabs-tabcontent table {
  width: 100% !important;
}

.station-tabs-tabcontent th,
.station-tabs-tabcontent td {
  width: auto !important;
}

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

Use responsive HTML

HTML table elements can not be made responsive, meaning their layout can not change based on screen size or available space.

In many cases, the theme's responsive grid system can be used instead of a non-responsive table element, allowing tabular content to adapt to small screens.

Learn how to show content in responsive columns

Move the tabs

If a table can't be made to fit within the theme's content area, 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 content area the product images.