Specifying a fixed column width in jQuery Datatables - html-table

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.

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/.

Answer 2

Here is a code sample (fixed the column width for 4 column table):
set autoWidth: false;
set px values to first 3 columns;
important: check if the table width is a bit more than 3 columns + final one;
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.

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;
}`

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;
}
}