Why a width is not always obeyed

A column width in Tabulizer is a CSS width on the column's cells. In an HTML table that is a request, not an order: the browser gives every column at least the room its content needs, then shares out what is left. So a column grows past its width when something inside it cannot shrink, and every other column pays for it. The three usual causes, in the order to check them:

Step 1: check the widths in the wizard

Open the ruleset in the online Table Wizard and go to step 3 (Style). Under Table Width you will find Column(s) Width, with one entry per column.

Change what is wrong, go on to step 6 to see the preview, and import the ruleset into your site again.

Step 2: check the column filters

If the table has column filters of type Select/Drop-Down or Input/Text (step 4, Column Filters), each one is a form control sitting in the column's heading - and the column grows to fit the widest of them. A drop-down is as wide as its longest option, so one long category name is enough. A text box has a default width of its own, often wider than a narrow column.

Here the three columns were set to 60%, 10% and 30%. The drop-down in the Category column is wider than 10%, so that column takes more than twice its share and Product loses the difference:

The fix is to limit the filter controls to the width of their column. Add this in step 5 of the wizard, in the Append CSS Code box, with your own table class in place of tabtable-rs_samki35o - the note under the box tells you what yours is:

table.tabtable-rs_samki35o tr.tabrow th select,
table.tabtable-rs_samki35o tr.tabrow th input[type="text"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

Each filter now takes exactly the width of its column, and the columns go back to the widths you set:

Filters placed outside the table (above or below it, as an external filter panel) do not sit in the columns and cannot cause this.

Step 3: check what your template does

Your site's template has its own stylesheets, and they apply to the table too. When one of their rules is more specific than Tabulizer's - or marked !important - it wins, and your width is quietly replaced. It can do so directly, with a rule on the table cells, or indirectly, through the controls inside them. The table in step 2 is a real example of the indirect kind: the 220px drop-down came from the template, whose stylesheet sets select { width: 220px; } for every drop-down on the site.

Find the rule that wins

Open the page in your browser, right-click a cell of the column that is wrong and choose Inspect. The Styles panel lists every rule that applies to that cell, and crosses out the ones that lost. If Tabulizer's width is crossed out, the rule above it - with the template's file name beside it - is the one to beat.

Beat it with a more specific rule

Make your rule more specific than the template's, so the browser prefers it. Tabulizer's own width rule already starts from the table class, as in table.tabtable-rs_samki35o tr.tabrow.tabrow td.col_width_2. Lengthen the selector - put body or the id of your content area in front of it - and, only if that is still not enough, add !important:

body table.tabtable-rs_samki35o tr.tabrow.tabrow td.col_width_2,
body table.tabtable-rs_samki35o tr.tabrow th.col_width_2 {
  width: 10% !important;
}

There are two places to put it:

Common questions

Read more

How the filters are set up: Column Filtering. Where your own CSS goes and why it can override the wizard: Appending HTML, CSS and JavaScript.