Specifying a fixed column width in jQuery Datatables

Question

I'm trying to specify a fixed width for a few columns in a jQuery datatable. I've attempted to accomplish this via the column definitions specified in the datatables documentation, but the column and column header still get auto-sized.

Here's the jsFiddle I've been working with: jsFiddle

JavaScript:

var table = $('#example2').DataTable({
        "tabIndex": 8,
        "dom": '<"fcstTableWrapper"t>lp',
        "bFilter": false,
        "bAutoWidth": false,
        "data": [],
        "columnDefs": [
            {
                "class": 'details-control',
                "orderable": false,
                "data": null,
                "defaultContent": '',
                "targets": 0
            },
            { 
                "targets": 1},
            { 
                "targets": 2,
                "width": "60px"},
            { 
                "targets": 3,
                "width": "1100px"},
            { 
                "targets": 4},
            { 
                "targets": "dlySlsFcstDay"},
            { 
                "targets": "dlySlsFcstWkTtl",
                "width": "60px"}
        ],
        "order": [
            [1, 'asc']
        ]
    });

HTML:

<div class="forecastTableDiv">
            <table id="example2" class="display" cellspacing="0" width="100%">
                <thead>
                <tr>
                    <th colspan="5"></th>
                    <th  class="slsFiscalWk" colspan="8">201424</th>
                    <th  class="slsFiscalWk" colspan="8">201425</th>
                    <th  class="slsFiscalWk" colspan="8">201426</th>
                    <th  class="slsFiscalWk" colspan="8">201427</th>
                </tr>
                <tr>
                    <!--<th></th>-->
                    <!--<th>Vendor</th>-->
                    <!--<th>Origin ID</th>-->
                    <!--<th>Destination</th>-->
                    <!--<th>Vendor Part Nbr</th>-->
                    <!--<th>SKU</th>-->
                    <!--<th>Mon</th>-->
                    <!--<th>Tue</th>-->
                    <!--<th>Wed</th>-->
                    <!--<th>Thu</th>-->
                    <!--<th>Fri</th>-->
                    <!--<th>Week Ttl</th>-->

                    <th></th>
                    <th>Vendor</th>
                    <th>Origin ID</th>
                    <th style="width: 200px">Vendor Part Nbr</th>
                    <th>SKU</th>
                    <!-- First week -->
                    <th class="dlySlsFcstDay" >Mon</th>
                    <th class="dlySlsFcstDay" >Tue</th>
                    <th class="dlySlsFcstDay" >Wed</th>
                    <th class="dlySlsFcstDay" >Thu</th>
                    <th class="dlySlsFcstDay" >Fri</th>
                    <th class="dlySlsFcstDay" >Sat</th>
                    <th class="dlySlsFcstDay" >Sun</th>
                    <th class="dlySlsFcstWkTtl" >Week Ttl</th>
                    <!-- Second week -->
                    <th class="dlySlsFcstDay" >Mon</th>
                    <th class="dlySlsFcstDay" >Tue</th>
                    <th class="dlySlsFcstDay" >Wed</th>
                    <th class="dlySlsFcstDay" >Thu</th>
                    <th class="dlySlsFcstDay" >Fri</th>
                    <th class="dlySlsFcstDay" >Sat</th>
                    <th class="dlySlsFcstDay" >Sun</th>
                    <th class="dlySlsFcstWkTtl" >Week Ttl</th>
                    <!-- Third week -->
                    <th class="dlySlsFcstDay" >Mon</th>
                    <th class="dlySlsFcstDay" >Tue</th>
                    <th class="dlySlsFcstDay" >Wed</th>
                    <th class="dlySlsFcstDay" >Thu</th>
                    <th class="dlySlsFcstDay" >Fri</th>
                    <th class="dlySlsFcstDay" >Sat</th>
                    <th class="dlySlsFcstDay" >Sun</th>
                    <th class="dlySlsFcstWkTtl" >Week Ttl</th>
                    <!-- Fourth and final week -->
                    <th class="dlySlsFcstDay" >Mon</th>
                    <th class="dlySlsFcstDay" >Tue</th>
                    <th class="dlySlsFcstDay" >Wed</th>
                    <th class="dlySlsFcstDay" >Thu</th>
                    <th class="dlySlsFcstDay" >Fri</th>
                    <th class="dlySlsFcstDay" >Sat</th>
                    <th class="dlySlsFcstDay" >Sun</th>
                    <th class="dlySlsFcstWkTtl" >Week Ttl</th>
                </tr>
                </thead>

                <tfoot>
            </table>
        </div>

When I inspect the live code, I can see that the width I'm specifying in the column definition is getting added to the column as a style attribute, but it doesn't match the actual width of the column.

Endogen

$('#example').DataTable({ autoWidth: false, //turn off autowidth first, then – Baskett

Answer 1

This is not a DataTables issue. See how column widths are determined. Based on this algorithm I see the following two solutions.

Solution 1

Calculate yourself the table width and set it accordingly.

#example {
  width: 3562px;
}

See live example here: http://jsfiddle.net/cdog/jsf6cg6L/.

Solution 2

Set the minimum content width (MCW) of each cell and let the user agent to determine the column widths.

To do this, add classes to the target columns to be able to style them:

var table = $('#example').DataTable({
  tabIndex: 8,
  dom: '<"fcstTableWrapper"t>lp',
  bFilter: false,
  bAutoWidth: false,
  data: [],
  columnDefs: [{
    class: 'details-control',
    orderable: false,
    data: null,
    defaultContent: '',
    targets: 0
  }, {
    targets: 1
  }, {
    class: 'col-2',
    targets: 2
  }, {
    class: 'col-3',
    targets: 3
  }, {
    targets: 4
  }, {
    targets: 'dlySlsFcstDay'
  }, {
    targets: 'dlySlsFcstWkTtl'
  }],
  order: [[1, 'asc']]
});

Then set the desired value of the minimum width property for each class:

.col-2,
.dlySlsFcstWkTtl {
  min-width: 60px;
}

.col-3 {
  min-width: 1100px;
}

See live example here: http://jsfiddle.net/cdog/hag7Lpm5/.

Bumkin

Simple answer but missed to think in that way – Entremets

Answer 2

Here is a code sample (fixed the column width for 4 column table):

1. set autoWidth: false;
2. set px values to first 3 columns;
3. important: check if the table width is a bit more than 3 columns + final one;

4. adjust the table width and 4th column.

   $('#example').DataTable({ //four column table
      autoWidth: false, //step 1
      columnDefs: [
         { width: '300px', targets: 0 }, //step 2, column 1 out of 4
         { width: '300px', targets: 1 }, //step 2, column 2 out of 4
         { width: '300px', targets: 2 }  //step 2, column 3 out of 4
      ]
   });
   

Set table width, 4*300px:

     #example { width: 1200px };

As result you will see 1st 3 columns with 300px width and the final one will be flexible and about 150px (which requires additional adjusting).

---

Last but not least: fixed column size 300px will not prevent you from the case when cell contains a too long (> 300px without spaces) word. So you have to keep in mind that all words must be less than the fixed side of your column.

Baskett

Answer 3

for the <table> tag or its css class or css id add the following style:

`table{
     margin: 0 auto;
     width: 100%;
     clear: both;
     border-collapse: collapse;
     table-layout: fixed;
     word-wrap:break-word;
}`

Windfall

Answer 4

Setting a fixed column width can be a real pain. The following solution works nicely.

{ width: 250, targets: 1, class: "someClass",
    render : function ( data, type, row ) {
        if ( type === 'display' ) {
            return `<div style="width:250px"> ${data} </div>`;
        }
        return data;
    }
}

Suspense