Constant Column Width Post Search

DT User

Hello All,

We are facing an issue while doing the search in a particular column of the datatable screen.

When the datatable is initially loaded then the column width is assigned as per the data present in those columns. But when we are searching for any data in the particular column then the width is changing as per the new filtered data. But our requirement is that the width should remain constant which was initially defined for that particular column after the search as well.

So is there any way by which we can fix the width of the column so that it remains constant after the search in any column of the datatable?

Thanks in advance.

colin

You can use the CSS

table {
  table-layout: fixed;
}

to stop the columns resizing. You may need to also use columns.width to set an initial width, as it can cause the data to bleed into the next cell. Please see example here.

Colin

DT User

Hi Colin,

Thanks for the update but I would like to inform you that we have already tried the above-mentioned solution but the data of the cells gets overlapped with the data of the other cells.

This also happens when we zoom in or zoom out the page using the browser zoom function.

kthorngren

This also happens when we zoom in or zoom out the page using the browser zoom function.

See this thread about browser zoom.

but the data of the cells gets overlapped with the data of the other cells.

What do you want to happen when the data is too long for the cell? Maybe you need to enable word wrapping or use something like this ellipsis plugin.

Kevin

DT User

Hi Kevin,

1. Browser zoom issue

As per the understanding, the browser zoom issue will not be fixed as the team is not having control over the browser zoom functionality. Is the understanding correct?

2. Data of the cells gets overlapped with the data of the other cells.

We are using the ellipsis plugin when the data is too long. But the scenario which we are talking about happens when we maximize or minimize the datatable screen. If we use the above CSS properties and column.width option then the data bleeds into the next cell if we maximize or minimize the datatable screen after applying the search on any column. This works fine only when the page is fixed and no changes are done by the user for increasing or decreasing the screen.

colin

It's unlikely we'll address any browser zoom issues, as it's something that's not fully supported in DataTables. If you could link to a test case, we can take a look and see if it's something with a quick fix. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin