//JS
oTable = $('#TeardownTbl').DataTable({
/*
"rowReorder": {
selector: 'tr'
},
*/
//
"bFilter": true,
"aLengthMenu": [[10, 25, 100,500], [10, 25, 100,500]],
"sAjaxSource": URL,
//
"sScrollY" : "500",
"processing": true,
"iDisplayLength": 500,
"sScrollX" : "1800px",
//
"sScrollY" : "400px",
//
"scroller": true,
"bDestroy": true,
"scrollCollapse": true,
//
"autoWidth": false,
//
"rowReorder": true,
"aaSorting": [],
"aoColumns": [
{ "mData": "TLABLE","sClass": "avo-light", "bSortable": false },
{ "mData": "TRANSFER","sClass": "avo-light"},
{ "mData": "TYPE","sClass": "avo-light"},
{ "mData": "ENGINENUMBER"},
{ "mData": "PROGRAM"},
{ "mData": "TESTNAME"},
{ "mData": "TEST_TERMINATED","sClass": "avo-light","mRender": function (data, type, full) {if (data == 'Y'){ return 'Yes'; }else{ return 'No'; }}},
{ "mData": "TEARDOWNTECH"},
{ "mData": "REASON"},
{ "mData": "LOCATION"},
{ "mData": "STATUS"},
{ "mData": "MECHANIC"},
{ "mData": "HM"},
{ "mData": "REQUESTED_BY"},
{ "mData": "REQUESTED_DATE"},
{ "mData": "TDCOMMENT"}
],
"columnDefs": [
{ "width": "5%", "targets": 1 },
{ "width": "5%", "targets": 2 },
{ "width": "5%", "targets": 3 },
{ "width": "10%", "targets": 4 },
{ "width": "8%", "targets": 5 },
{ "width": "10%","targets": 6 },
{ "width": "7%", "targets": 7 },
{ "width": "7%", "targets": 8 },
{ "width": "4%", "targets": 9 },
{ "width": "10%", "targets": 10 },
{ "width": "6%", "targets": 11 },
{ "width": "4%", "targets": 12 },
{ "width": "5%", "targets": 13 },
{ "width": "5%", "targets": 14 },
{ "width": "5%", "targets": 15 },
{ "width": "5%", "targets": 15 }
],
"fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
oSettings.jqXHR = $.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
}
});
//CFM file
<div style="width:1320px;">
<table id="TeardownTbl" border="1" class="compact" style=" font-size: 0.8em; ">
<thead>
<tr>
<td></td>
<td></td>
<td><input type="text" id="2" value="" size="5" class="search_init" /></td>
<td><input type="text" id="3" value="" size="16" class="search_init" /></td>
<td><input type="text" id="4" value="" size="38" class="search_init" /></td>
<td><input type="text" id="5" value="" size="44" class="search_init" /></td>
<td><input type="text" id="6" value="" size="12.5" class="search_init" /></td>
<td><input type="text" id="7" value="" size="11.5" class="search_init" /></td>
<td><input type="text" id="8" value="" size="15" class="search_init" /></td>
<td></td>
<td></td>
<td><input type="text" id="11" value="" size="5.5" class="search_init" /></td>
<td><input type="text" id="12" value="" size="5" class="search_init" /></td>
<td><input type="text" id="13" value="" size="8" class="search_init" /></td>
<td><input type="text" id="14" value="" size="8" class="search_init" /></td>
<td><input type="text" id="15" value="" size="8" class="search_init" /></td>
</tr>
<tr style="font-size: 1em;">
<th>LABEL</th>
<th>TRANSFER</th>
<th>TYPE</th>
<th>ENGINE NUMBER</th>
<th>PROGRAM</th>
<th>TEST NAME</th>
<th>TEST TERMINATED</th>
<th>TD TECH</th>
<th>REASON</th>
<th>LOCATION</th>
<th>STATUS</th>
<th>MECHANIC</th>
<th>HOURS /MILES</th>
<th>REQUESTED BY</th>
<th>REQUESTED DATE</th>
<th>TDCOMMENT</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
I have been manually adjusting the width in both data table and from cfm file but the alignment is not proper.