When the column width does not follow the specified value.

Sometimes, even though you have set the column width to a fixed value (e.g. 50px) or a percentage value (e.g. 20%) the resulting width looks larger than the specified one.

In most cases this is happening because the column contains a cell whose width is larger than the column width. More specifically, the column must be wide enough to hold the widest cell and the cell must be wide enough to hold its widest HTML element, as shown in the relationship below:

column width >= cell width >= HTML element width.

What this means is that if in the column there is a cell that contains an input box whose width is 200px, the width of the column will be at least 200px, regardless of its specified width. This is a very common scenario when the table contains a column filter (select box/input box) and the bootstrap framework is used by the site template/theme.

The resolution is to overwrite the width of the input box/select box using a CSS statement similar to:

div.dataTables_wrapper table tr td input {
    width: 90px;

Of course, you can overwrite the width of a specific column, as shown below for the 2nd column:

div.dataTables_wrapper table tr td:nth-child(2) input {
    width: 50px;

Finally, if you are using drop-down boxes (select filter), consider replacing it with an input box (text filter).