Column Width

plw

I have a table 4 columns wide. This is column 3

<td bgcolor="#F2F2F2" style="width: 203px !important">
        <h3>column 4</h3>
</td>

It is ignoring the width of 203px so I have added

{ width: '20%', targets: '2' }

and now have

<script type="text/javascript">         
           $(document).ready(function () { 
               $("#DTable").dataTable({ 
                   "pageLength": 30,
                   
                   columnDefs: [
                        { type: 'natural-nohtml', targets: '0' },
                        { width: '20%', targets: '2' }
                    ],
                   "lengthMenu": [ 10, 25, 30, 50, 75, 100 ],
                   "bFilter": false,
                   "aaSorting": [[ 0, 'asc' ]],
                   "aoColumns": [ 
                       { "bSortable": true },
                       { "bSortable": true },   
                       { "bSortable": true },                    
                       { "bSortable": false }                                         
                   ]
               });
           });  

But thhe width is still the same. I need it wider so the contents aren't over more than one line.

How do I do it?

Thanks

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. 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

plw

I take it

columnDefs: [
{ type: 'natural-nohtml', targets: '0' },
{ width: '20%', targets: '2' }
]

should have worked for the width of column 3 then?
The site is a test one and is password protected so I can give you a link and the data is being read from a Database so I can't see how I can send you a test case

plw

I have just tried

autoWidth: false,

but that didn't work either

allan

Hi,

Very likely what is happening is that the browser is collapsing the table's widths to try and fit everything into the visible area (i.e. without scrolling). You can see that quite clearly in this example - when narrow, the browser will basically throw away your width setting to try and get everything visible. But when there is enough space (horizontally) then the column can start to take up the extra space.

Without a test case I can't say for certain, but I'm 99.9% sure that is what is happening here.

Allan