Column Width

Column Width

plwplw Posts: 34Questions: 13Answers: 0
edited July 2021 in DataTables

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.

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    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

  • plwplw Posts: 34Questions: 13Answers: 0

    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 :(

  • plwplw Posts: 34Questions: 13Answers: 0

    I have just tried

    autoWidth: false,

    but that didn't work either

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

Sign In or Register to comment.