How to set word-wrap and limit column width while altering visibility?

pansengtat

Hi,

I have an issue with attempting to have each column, in case if it is too long, to have a word-wrap: break-word property, and at the same time, not letting DataTables automatically resize the column width for columns that have long string lengths.

I have set the targeted table in the CSS to have a table-layout: fixed and attempt to use "columnDefs": { "width" }, however I also need to target certain columns to be invisible and unsearchable. Combined, I have something like this:

"columnDefs": [
{
          "targets":    [ 0, 1, 15, 18, 20 ],
          "visible":    false,
          "searchable": false
},
{
          "width": "5.3%",
          "targets": [ 2, 3, 4, 5, 6, /* Just include all visible columns here */ ]
}], 

Do note that this also has a footer filer in its initcomplete section, and while I could load the data fine and see the filters, the column width for all columns that have a long string tend to be resized. I have also switching between use/not using autoWidth: false, yet it still manages to resize the columns.

Another attempt to modify this is as follows, but no luck so far.

<table id="myWebTable" class="display dataTable" role="grid" style="overflow-x: scroll; overflow-y: scroll; max-width: 90%; display: block; white-space: word-wrap: break-word;" cellspacing="0">

Are there other ways to force specific columns to their own defined widths?

allan

The most accurate way is to put the cell content into a wrapper element (a span or div) and then apply CSS to it to force the exact size and options you want.

The browser can, will and almost always does override the widths applied to suit the layout. Frustrating, but that is how it works.

Allan