Rgd DataTable bAutoWidth not working

baokydev

I trying define a column width for each column, but they are all the same width, even though I set bAutoWidth to false, they still calculate the width of the longest column and set it same for the rest of column, what should I do to fix this issue.

Below is my html code for table

 <table id="table_output" class="table table-bordered table-striped">
                                        <thead>
                                            <tr class="filters">
                                                <td>ID</td>
                                                <td>Date Time</td>
                                                <td>Event</td>
                                            </tr>
                                            <tr>
                               <th style="width: 25px;">ID</th>
                               <th style="width: 80px;">Date Time</th>
                               <th style="width: 105px;">Event</th>
                                            </tr>
                                        </thead>
                                    </table>

Below is my data table code

            $(document).ready(function() {

                var dataSet = [
                   <?=$data;?>
                ];
                $('#table_output').dataTable({
                    "order": [[ 0, "desc" ]],
                    "data": dataSet,
                    "bAutoWidth": false
                });


                // Setup - add a text input to each footer cell
                var tbnum = 0;
                $('#table_output thead td').each( function () {
                    var title = $('#table_output thead th').eq( $(this).index() ).text();
                    $(this).html( '<input type="text" class="search'+ tbnum +'" placeholder="Search '+title+'" />' );
                    tbnum+=1;
                } );

                // DataTable
                var table = $('#table_output').DataTable();
                // Apply the search
                 table.columns().eq( 0 ).each( function ( colIdx ) {
//                     alert(colIdx);
                    $( '.filters .search'+colIdx).on( 'keyup change', function () {
                        table
                            .column( colIdx )
                            .search( this.value )
                            .draw();
                    } );
                } );
            });

mRender

This is what I do, not sure if it'll help or not.

<td width="20%">ID</td>
                                               <td width="40%">Date Time</td>
                                               <td width="40%">Event</td>

allan

@baokydev - Please link to a test case showing the issue.

Allan