Cannot Set Column Width

Taylor514ce

My columns all render the same, equal, sizes. I need to set specific columns to specific widths in px. I've tried using both the "columns" option and the "columnDefs" options, and my width settings are ignored.

Given the table object below, how would I control the widths of specific columns?

<!-- Assignment List DataTable objects and helper functions -->
  obj_tblAssignments = $('#tblAssignments').DataTable( {
    initComplete: function(settings, json) {
            // Apply the search
            this.api().columns().every( function () {
                var that = this;
 
                $( 'input', this.footer() ).on( 'keyup change clear', function () {
                    if ( that.search() !== this.value ) {
                        that
                            .search( this.value )
                            .draw();
                    }
                } );
            } );
        },
    processing: true,
    serverSide: false,
    scrollY: $(document).height() - 320,
    scrollCollapse: true,
    paging: false,
    info: false,
    order: [[ 0, "asc" ]],
    columnDefs: [
    {
      targets: [1],
      createdCell: function (td, cellData, rowData, row, col) {
        $('a', td).eq(0).attr('onclick', 'getCourse(' +rowData[0] + '); target="_blank"; return false;' );
      }
    } 
    
    ],
    sDom: '<"H">t<"F">',
    ajax: 'fetchAssignments'
  } );

kthorngren

Could be the text inputs used for the column search. You might need to add a CSS like this:

tfoot input {
  width: 100%;
}

Another item that might affect the column widths is the width of the data in the column. The browser might be forcing the column width wider than expected due to the data width. There are some options to look at if this is the case. Let us know.

If you still need help please post a link to your page or a test case replicating this issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Taylor514ce

It definitely has something to do with the footer, when I remove it, the column widths autofit nicely, instead of all being of equal size. Adding the style declaration didn't help, but I'll keep exploring how to handle the footer.

Taylor514ce

Setting the style of the input inline was the fix:

  $('#tblCourses tfoot th').each( function () {
      var title = $(this).text();
      $(this).html( '<input type="text" placeholder="'+title+'" style="width: 100%;" />' );
  } );

colin

Nice, thanks for reporting back. And sorry about the need to post several times, the spam filter was a little too aggressive!

Colin