Setting the width of table columns

One of the things you may want to do is to set the width of individual columns, lets say the width of the 1st column and the 5th column. One other scenario is to set the width of all columns to be equal. Below we explain how you can do that.

Setting the width of a column is a two step process:

  1. Apply a CSS class to the desired column
  2. Set the width of the column via a CSS statement.

Let's see a specific example to illustrate these steps.
1) We add a new rule with the following settings:

Element: Column
Range: 1
Style/CSS Selector: td_1

By adding this rule to the existing ruleset, the CSS class td_1 will be applied to the cells of the first column of the table, because we have set the range to 1. There is nothing special to td_1, you could have named it "td_first" or "td_id" or anything else you wish provided it is a valid CSS class.
2) So far the elements of the first column have the CSS class td_1, so let's specify its width in the companion CSS file for the ruleset:

td.td_1 { width: 60px; }

That's it! Let's do the same for the 5th column:

1) The rule settings are:

Element: Column
Range: 5
Style/CSS Selector: td_5

2) The CSS statement in the ruleset's CSS file is:

td.td_5 { width: 120px; }

If we wanted all table columns to have the same width, we can use the following CSS statement as the column class tabcol is being applied to all table cells by default:

table tr td.tabcol { width: 10%; }
Tip: When you create a ruleset with the online ruleset wizard you have the chance to specify the column width in one of the steps: