Specifying a fixed column width in jQuery Datatables

http://stackoverflow.com/questions/25706537/specifying-a-fixed-column-width-in-jquery-datatables

by Shrikrishna Gupta

HTML

<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
<div class="forecastTableDiv">
  <table id="example" class="display">
    <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>Vendor Part Nbr</th>
        <th>SKU</th>
        <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>
        <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>
        <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>
        <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...

CSS

#example {
  width: 3562px;
}

JavaScript

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
  },
  { 
    targets: 2,
    width: '60px'
  },
  { 
    targets: 3,
    width: '1100px'
  },
  { 
    targets: 4
  },
  { 
    targets: 'dlySlsFcstDay'
  },
  { 
    targets: 'dlySlsFcstWkTtl',
    width: '60px'
  }],
  order: [
    [1, 'asc']
  ]
});